Question

我有一个Vue组件，其中包括一些具有复杂逻辑的外部模块。例如：

// Component.vue
import Vue from 'vue';
import { externalModule } from '@/path/to/module';

export default {
  methods: {
    useExternalModule() {
      externalModule.doSomethig();
    }
  }
};

是否可以模拟故事中的externalModule？

我正在使用Storybook v6。

Answer 1

您可以创建一个__mocks__文件夹以放入模拟组件。然后在.storybook/main.js文件中，使用此文件夹将webpack指向您的模拟文件。

module.exports = {
  // your Storybook configuration

  webpackFinal: (config) => {
    config.resolve.alias['externalModule'] = require.resolve('../__mocks__/externalModule.js');
    return config;
  },
};

“模拟导入” https://storybook.js.org/docs/react/workflows/build-pages-with-storybook

下的文档中对此进行了介绍。

但是，这是全局配置，而不是故事级别的配置。

如何在故事书的故事中模拟模块？

1 个答案: