有没有办法模拟每个故事的模块

Question

我正在使用带有 nextjs 项目的故事书，并且想要模拟整个模块，例如（useMemo） 我使用了这个插件https://storybook.js.org/addons/storybook-addon-module-mock 但我的项目中的样式组件存在运行时错误

我在故事书之前使用了 jest.mock 类似的东西

import randomColor from "randomcolor";


jest.mock("randomColor", () => {
  return {
    randomColor: () => {
      return mockColor('#123456');
    }
  }
});

但我无法通过故事书在这里体验

Answer 1

您可以先在主要故事包装器中创建模拟， 在每个故事中，您都可以检索模拟并更改返回对象。

import { createMock , getMock } from 'storybook-addon-module-mock';

const MainWrapper = {
  title: 'Title',
  component: UIComponent,
  parameters: {
    moduleMock: {
      mock: () => {
        const mock = createMock(ClassName , 'function')
        mock.mockClear()
        mock.mockReturnValue({
          'any' : 'thing'
        });
        return mock
      }
    }
  }
}



export const SomeStory = {
  parameters: {
    moduleMock: {
      mock: () => {
        const mock = getMock({moduleMock : {mocks : [MainWrapper.parameters.moduleMock.mock()]}} , ClassName, 'function')
        mock.mockClear()
        mock.mockReturnValue({
          'different' : 'thing'
        })
        return mock
      }
    }
  }
}

export default MainWrapper

这个对我有用。