故事书中有两次Stub axios

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了故事书中有两次Stub axios相关的知识,希望对你有一定的参考价值。

[我有几个使用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>
      `,
    });
答案

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

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

以上是关于故事书中有两次Stub axios的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装

upload组件,上传时为啥有两次请求

Android片段生命周期:onResume调用了两次

使用axios发送请求,遇到会发两次的情况