无法使用 Vuejs 在 Storybook 中使用 axios-mock-adapter 模拟 axios api 调用

Question

一直试图在我的 VueJS 项目中使用故事书，但我一直坚持模拟 api 调用。我尝试使用 axios-mock-adapter 没有运气。

我的故事书文件代码是：

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

我用对了吗？

Answer 1

我强烈建议使用Storybook-addon-mock在 Storybook 中模拟 (axios) API 调用。

它很好地集成到 Storybook 中，不同故事中的设置很容易，并且可以在相应的面板中更改数据。

需要执行以下 4 个步骤：

1. 添加额外的依赖项：yarn add storybook-addon-mock

2. 调整配置并添加.storybook/main.js：

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

3. 配置行为并为 中的常规/重复 API 调用添加模拟数据.storybook/preview.js。这些是每个故事中都会出现的模拟。

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
  }

4. 在你的故事文件中添加：

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'