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

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下的文档中有介绍

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