故事书中有两次Stub axios

Question

[我有几个使用Axios调用的组件，我试图“存根”那些功能，但是，在故事书“尝试包装已经包装的get上，我收到以下错误”。

我想知道是否有一种方法可以定义存根多次，因为我尝试在每个compXX.stories.js的末尾使用sinon.reset（），但它不起作用。

以下是一些代码：

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>
      `,
    });

Answer 1

对于错误“尝试包装已经包装的get”，您需要检查this。关键是：如果要再次存根相同的方法，无论是否带有sandbox，都需要还原而不是重置。

对于axios存根/模拟：通常我使用axios-mock-adapter，可能更适合您的情况。