Блог

У меня есть компонент Vue, который включает в себя несколько внешних модулей со сложной логикой. Например:

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

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

Возможно ли высмеять externalModule то, что происходит внутри истории?

Я использую Storybook v6.

Вы можете создать __mocks__ папку для размещения ваших макетных компонентов. Затем в вашем .storybook/main.js файле используйте это, чтобы указать webpack на ваш макет файла.

 module.exports = {
  // your Storybook configuration

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

Это описано в документации в разделе «Имитационный импорт».

Однако это глобальная конфигурация, а не конфигурация на уровне истории.