在故事书中存根 axios 两次

Question

我有几个使用 Axios 调用的组件，我正在尝试 "stub" 这些函数，但是，我在故事书上收到以下错误 "Attempted to wrap get which is already wrapped"。

我想知道是否有办法多次定义存根，因为我尝试在每个 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

错误"Attempted to wrap get which is already wrapped"，您需要检查. The point is: you need restore rather than reset, if you want to stub the same method again, with or without sandbox。

对于axios stub/mock：通常我使用axios-mock-adapter，这可能更适合你的情况。

Answer 2

一个伙伴通过在.storybook文件夹中添加一个middleware.js文件解决了这个问题，所以我们不模拟数据，在这种情况下我们从"local server"中获取实际数据并且可以根据您所在的服务器进行更改。

PD：我正在使用 AEM。服务器必须打开并登录。

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

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

在故事书中存根 axios 两次

Stub axios twice in storybook

stub

sinon

vue.js

axios

storybook