无法在具有Vuews的Storybook中使用axios模拟适配器模拟axios API调用

9udxz4iz 于 2022-11-23 发布在 iOS

关注(0)|答案(1)|浏览(237)

我尝试在我的VueJS项目中使用故事书，但我被模拟API调用卡住了。我尝试使用axios模拟适配器，但没有成功。
我的故事书文件代码是：

import { storiesOf } from '@storybook/vue';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean } from '@storybook/addon-knobs';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import fileUpload from './fileUpload.vue';

const mock = new MockAdapter(axios);

mock
  .onPost('https://s3.amazonaws.com')
  .reply(200, []);

storiesOf('Common|File CSV Upload', module)
  .addDecorator(withKnobs)
  .add('Default', () => ({
    components: { fileUpload },
    data: () => ({
    }),
    template: ` 
        <v-flex>
            <file-upload></file-upload>
       </v-flex>`,
    methods: {
      action: action('file upload'),
    },
  }));

我用得对吗？

axios

来源：https://stackoverflow.com/questions/55187915/cant-mock-axios-api-call-with-axios-mock-adapter-in-storybook-with-vuejs

1条答案

按热度按时间

vx6bjr1n1#

我强烈建议在Storybook中使用storybook-addon-mock来模拟（axios）API调用。
它nicley集成到Storybook中，在不同的故事中设置很容易，数据可以在相应的面板中更改。

需要以下4个步骤：

1.添加附加的依赖关系：yarn add storybook-addon-mock
1.调整配置并添加.storybook/main.js：

module.exports = {
  addons: [
    ...
    'storybook-addon-mock',
  ],

1.配置行为并为.storybook/preview.js中的一般**/重复API调用添加**模拟数据。这些模拟将在每个故事中可用。

export const parameters: Parameters = {
  mockAddonConfigs: {
    globalMockData: [
      {
        url: 'api/token',
        method: 'POST',
        status: 200,
        response: () => '1234567abcdefg',
      },
    ],
    refreshStoryOnUpdate: true, // This re-render the story if there's any data changes
    // disable: true, // This disables the panel from all the stories
  }

1.在您故事文件中添加：

export default {
  title: 'components/myComponentName',
  component: MyComponent,
  parameters: {
    mockData: [
      {
        url: '/api/myendpoint/',
        method: 'GET',
        status: 200,
        delay: 500,
        response: () => 'some content',
      },
      {
        url: '/api/myendpoint/',
        method: 'POST',
        status: 200,
        delay: 1000,
        response: {
          data: 'some response',
        },
      },
    ],
  },

提示：查看不同的响应-函数、字符串等，以将它们与真实的响应匹配。data条目可能存在缺陷，而response: () => 'some content'可以避免该缺陷

赞(0）回复(0）举报 2022-11-23

我来回答

无法在具有Vuews的Storybook中使用axios模拟适配器模拟axios API调用

1条答案

相关问题

热门标签

最新问答