How to mock modules in storybook's stories?

Question

I have a Vue component which includes some external modules with complicated logic. For example:

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

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

Is it possible to mock the externalModule inside the story?

I'm using Storybook v6.

Answer 1

You can create a __mocks__ folder to put your mock components in. Then in your .storybook/main.js file use this to point webpack to your mock file.

module.exports = {
  // your Storybook configuration

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

This is covered in the docs under "Mocking imports".

However, this is a global configuration and not a story level configuration.