Stub axios twice in storybook

Question

I have several components using Axios calls, I am trying to "stub" those functions, however, I receive the following error on the storybook "Attempted to wrap get which is already wrapped".

I wonder if there's a way to define several times a stub because I tried using sinon.reset() at the end of each compXX.stories.js but it does not work.

Here is some of the code:

comp123.stories.js

import VueCustomElement from 'vue-custom-element';
import Vue from 'vue';
import sinon from 'sinon';
import axios from 'axios';
import * as rawJSON from './123-response.json';
import comp123 from 'comp123';
Vue.use(VueCustomElement);

const aStub = sinon.stub(axios, 'get').resolves(Promise.resolve(
    rawJSON.default
));

export default {
  title: '123 component',
  component: comp123,
  decorators: [withA11y],
};

export const Base = () => ({
  components: {comp123},
  template: `<div class="comp123"> ...component123
  </div>
  `,
});

comp345.sories.js

import VueCustomElement from 'vue-custom-element';
import Vue from 'vue';
import sinon from 'sinon';
import axios from 'axios';
import * as 345response from './345-response.json';
import comp345 from 'comp345';
Vue.use(VueCustomElement);

    const aStub = sinon.stub(axios, 'get').resolves(Promise.resolve(
        345response.default
    ));

    export default {
      title: '345 component',
      component: comp345,
      decorators: [withA11y],
    };

    export const Base = () => ({
      components: {comp345},
      template: `<div class="comp345"> ...component345
      </div>
      `,
    });

score 1 · Accepted Answer · answered Jun 09 '20 at 18:12

A partner got it solved by adding a middleware.js file in the .storybook folder, so we don't mock data, we get the actual data from a "local server" in this case and can be changed depending on the server you are on.

PD: I am using AEM. The server has to be on and logged in.

    const { createProxyMiddleware } = require('http-proxy-middleware');

   module.exports = function expressMiddleware (app) {
   app.use('/services', createProxyMiddleware({
     target: 'http://localhost:4502/services',
     changeOrigin: true,
     pathRewrite: {
      '^/services': '',
     },
  }))

score 0 · Answer 2 · answered May 28 '20 at 05:48

0

For error "Attempted to wrap get which is already wrapped", you need to check this. The point is: you need restore rather than reset, if you want to stub the same method again, with or without sandbox.

For axios stub/mock: usually I use axios-mock-adapter, which maybe more suitable for your case.

answered May 28 '20 at 05:48

andreyunugro

1,096
5
18

The problem is that I am using it on Storybook. And according to the approach, I don't know where to add an afterEach or the restore. – MaynorSong Jun 02 '20 at 23:47
Alternative: use global stub/mock. Stub/mock it once, use it everywhere. Just like mock windows / local storage in UI test. But, you need to define stub/mock not only with resolve (response) definition but also withArgs (request) definition, in order to differentiate request for each story. Again, you also can use not only sinon to stub axios, but also axios-mock-adapter. – andreyunugro Jun 03 '20 at 02:52

Stub axios twice in storybook

2 Answers2