storybook-addon-module-mock

Provides module mocking functionality like jest.mock on Storybook@8.

Added 'storybook-addon-module-mock' to Storybook addons.
Only works if Webpack is used in the Builder.

If you use Vite for your Builder, use this package.
https://www.npmjs.com/package/storybook-addon-vite-mock

Screenshot

usage

• Sample code
  https://github.com/SoraKumo001/storybook-module-mock

Regarding how to interrupt a mock

Interruptions vary depending on the Storybook mode.

• storybook dev
  • Make module.exports writable using Webpack functionality
• storybook build
  • Insert code to rewrite module.exports using Babel functionality

Addon options

Include and exclude are enabled for storybook build where Babel is used. Not used in storybook dev.

If include is omitted, all modules are covered.

1  addons: [
2    {
3      name: 'storybook-addon-module-mock',
4      options: {
5        include: ["**/action.*"], // glob pattern
6        exclude: ["**/node_modules/**"],
7      }
8    }
9  ],

Storybook@8 & Next.js

• .storybook/main.ts

1import type { StorybookConfig } from '@storybook/nextjs';
2
3const config: StorybookConfig = {
4  framework: {
5    name: '@storybook/nextjs',
6    options: {},
7  },
8  stories: ['../src/**/*.stories.@(tsx)'],
9  build: {
10    test: {
11      disabledAddons: ['@storybook/addon-docs', '@storybook/addon-essentials/docs'],
12    },
13  },
14  addons: [
15    '@storybook/addon-essentials',
16    '@storybook/addon-interactions',
17    {
18      name: '@storybook/addon-coverage',
19      options: {
20        istanbul: {
21          exclude: ['**/components/**/index.ts'],
22        },
23      },
24    },
25    {
26      name: 'storybook-addon-module-mock',
27      options: {
28        exclude: ['**/node_modules/@mui/**'],
29      },
30    },
31  ],
32};
33
34export default config;

Sample1

MockTest.tsx

1import React, { FC, useMemo, useState } from 'react';
2
3interface Props {}
4
5/**
6 * MockTest
7 *
8 * @param {Props} { }
9 */
10export const MockTest: FC<Props> = ({}) => {
11  const [, reload] = useState({});
12  const value = useMemo(() => {
13    return 'Before';
14  }, []);
15  return (
16    <div>
17      <button onClick={() => reload({})}>{value}</button>
18    </div>
19  );
20};

MockTest.stories.tsx

createMock replaces the target module function with the return value of jest.fn().
The mockRestore() is automatically performed after the Story display is finished.

1import { Meta, StoryObj } from '@storybook/react';
2import { expect, userEvent, waitFor, within } from '@storybook/test';
3import React, { DependencyList } from 'react';
4import { createMock, getMock, getOriginal } from 'storybook-addon-module-mock';
5import { MockTest } from './MockTest';
6
7const meta: Meta<typeof MockTest> = {
8  tags: ['autodocs'],
9  component: MockTest,
10};
11export default meta;
12
13export const Primary: StoryObj<typeof MockTest> = {
14  play: async ({ canvasElement }) => {
15    const canvas = within(canvasElement);
16    expect(canvas.getByText('Before')).toBeInTheDocument();
17  },
18};
19
20export const Mock: StoryObj<typeof MockTest> = {
21  parameters: {
22    moduleMock: {
23      mock: () => {
24        const mock = createMock(React, 'useMemo');
25        mock.mockImplementation((fn: () => unknown, deps: DependencyList) => {
26          // Call the original useMemo
27          const value = getOriginal(mock)(fn, deps);
28          // Change the return value under certain conditions
29          return value === 'Before' ? 'After' : value;
30        });
31        return [mock];
32      },
33    },
34  },
35  play: async ({ canvasElement, parameters }) => {
36    const canvas = within(canvasElement);
37    expect(canvas.getByText('After')).toBeInTheDocument();
38    const mock = getMock(parameters, React, 'useMemo');
39    expect(mock).toBeCalled();
40  },
41};
42
43export const Action: StoryObj<typeof MockTest> = {
44  parameters: {
45    moduleMock: {
46      mock: () => {
47        const useMemo = React.useMemo;
48        const mock = createMock(React, 'useMemo');
49        mock.mockImplementation(useMemo);
50        return [mock];
51      },
52    },
53  },
54  play: async ({ canvasElement, parameters }) => {
55    const canvas = within(canvasElement);
56    const mock = getMock(parameters, React, 'useMemo');
57    mock.mockImplementation((fn: () => unknown, deps: DependencyList) => {
58      const value = getOriginal(mock)(fn, deps);
59      return value === 'Before' ? 'Action' : value;
60    });
61    userEvent.click(await canvas.findByRole('button'));
62    await waitFor(() => {
63      expect(canvas.getByText('Action')).toBeInTheDocument();
64    });
65  },
66};

Sample2

message.ts

1export const getMessage = () => {
2  return 'Before';
3};

LibHook.tsx

1import React, { FC, useState } from 'react';
2import { getMessage } from './message';
3
4interface Props {}
5
6/**
7 * LibHook
8 *
9 * @param {Props} { }
10 */
11export const LibHook: FC<Props> = ({}) => {
12  const [, reload] = useState({});
13  const value = getMessage();
14  return (
15    <div>
16      <button onClick={() => reload({})}>{value}</button>
17    </div>
18  );
19};

LibHook.stories.tsx

1import { Meta, StoryObj } from '@storybook/react';
2import { expect, userEvent, waitFor, within } from '@storybook/test';
3import { createMock, getMock } from 'storybook-addon-module-mock';
4import { LibHook } from './LibHook';
5import * as message from './message';
6
7const meta: Meta<typeof LibHook> = {
8  tags: ['autodocs'],
9  component: LibHook,
10};
11export default meta;
12
13export const Primary: StoryObj<typeof LibHook> = {
14  play: async ({ canvasElement }) => {
15    const canvas = within(canvasElement);
16    expect(canvas.getByText('Before')).toBeInTheDocument();
17  },
18};
19
20export const Mock: StoryObj<typeof LibHook> = {
21  parameters: {
22    moduleMock: {
23      mock: () => {
24        const mock = createMock(message, 'getMessage');
25        mock.mockReturnValue('After');
26        return [mock];
27      },
28    },
29  },
30  play: async ({ canvasElement, parameters }) => {
31    const canvas = within(canvasElement);
32    expect(canvas.getByText('After')).toBeInTheDocument();
33    const mock = getMock(parameters, message, 'getMessage');
34    console.log(mock);
35    expect(mock).toBeCalled();
36  },
37};
38
39export const Action: StoryObj<typeof LibHook> = {
40  parameters: {
41    moduleMock: {
42      mock: () => {
43        const mock = createMock(message, 'getMessage');
44        return [mock];
45      },
46    },
47  },
48  play: async ({ canvasElement, parameters }) => {
49    const canvas = within(canvasElement);
50    const mock = getMock(parameters, message, 'getMessage');
51    mock.mockReturnValue('Action');
52    userEvent.click(await canvas.findByRole('button'));
53    await waitFor(() => {
54      expect(canvas.getByText('Action')).toBeInTheDocument();
55    });
56  },
57};

Sample3

MockTest.tsx

1import React, { FC, useMemo, useState } from 'react';
2interface Props {}
3
4/**
5 * MockTest
6 *
7 * @param {Props} { }
8 */
9export const MockTest: FC<Props> = ({}) => {
10  const [, reload] = useState({});
11  const value = useMemo(() => {
12    return 'Before';
13  }, []);
14  return (
15    <div>
16      <button onClick={() => reload({})}>{value}</button>
17    </div>
18  );
19};

MockTest.stories.tsx

1import { Meta, StoryObj } from '@storybook/react';
2import { expect, userEvent, waitFor, within } from '@storybook/test';
3import React, { DependencyList } from 'react';
4import { createMock, getMock, getOriginal } from 'storybook-addon-module-mock';
5import { MockTest } from './MockTest';
6
7const meta: Meta<typeof MockTest> = {
8  tags: ['autodocs'],
9  component: MockTest,
10};
11export default meta;
12
13export const Primary: StoryObj<typeof MockTest> = {
14  play: async ({ canvasElement }) => {
15    const canvas = within(canvasElement);
16    expect(canvas.getByText('Before')).toBeInTheDocument();
17  },
18};
19
20export const Mock: StoryObj<typeof MockTest> = {
21  parameters: {
22    moduleMock: {
23      mock: () => {
24        const mock = createMock(React, 'useMemo');
25        mock.mockImplementation((fn: () => unknown, deps: DependencyList) => {
26          // Call the original useMemo
27          const value = getOriginal(mock)(fn, deps);
28          // Change the return value under certain conditions
29          return value === 'Before' ? 'After' : value;
30        });
31        return [mock];
32      },
33    },
34  },
35  play: async ({ canvasElement, parameters }) => {
36    const canvas = within(canvasElement);
37    expect(canvas.getByText('After')).toBeInTheDocument();
38    const mock = getMock(parameters, React, 'useMemo');
39    expect(mock).toBeCalled();
40  },
41};
42
43export const Action: StoryObj<typeof MockTest> = {
44  parameters: {
45    moduleMock: {
46      mock: () => {
47        const useMemo = React.useMemo;
48        const mock = createMock(React, 'useMemo');
49        mock.mockImplementation(useMemo);
50        return [mock];
51      },
52    },
53  },
54  play: async ({ canvasElement, parameters }) => {
55    const canvas = within(canvasElement);
56    const mock = getMock(parameters, React, 'useMemo');
57    mock.mockImplementation((fn: () => unknown, deps: DependencyList) => {
58      const value = getOriginal(mock)(fn, deps);
59      return value === 'Before' ? 'Action' : value;
60    });
61    userEvent.click(await canvas.findByRole('button'));
62    await waitFor(() => {
63      expect(canvas.getByText('Action')).toBeInTheDocument();
64    });
65  },
66};

Sample4

ReRenderArgs.tsx

1import React, { FC } from 'react';
2import styled from './ReRenderArgs.module.scss';
3
4interface Props {
5  value: string;
6}
7
8/**
9 * ReRenderArgs
10 *
11 * @param {Props} { value: string }
12 */
13export const ReRenderArgs: FC<Props> = ({ value }) => {
14  return <div className={styled.root}>{value}</div>;
15};

ReRenderArgs.stories.tsx

1import { Meta, StoryObj } from '@storybook/react';
2import { expect, waitFor, within } from '@storybook/test';
3import { createMock, getMock, render } from 'storybook-addon-module-mock';
4import * as message from './message';
5import { ReRender } from './ReRender';
6
7const meta: Meta<typeof ReRender> = {
8  tags: ['autodocs'],
9  component: ReRender,
10};
11export default meta;
12
13export const Primary: StoryObj<typeof ReRender> = {};
14
15export const ReRenderTest: StoryObj<typeof ReRender> = {
16  parameters: {
17    moduleMock: {
18      mock: () => {
19        const mock = createMock(message, 'getMessage');
20        return [mock];
21      },
22    },
23  },
24  play: async ({ canvasElement, parameters }) => {
25    const canvas = within(canvasElement);
26    const mock = getMock(parameters, message, 'getMessage');
27    mock.mockReturnValue('Test1');
28    render(parameters);
29    await waitFor(() => {
30      expect(canvas.getByText('Test1')).toBeInTheDocument();
31    });
32    mock.mockReturnValue('Test2');
33    render(parameters);
34    await waitFor(() => {
35      expect(canvas.getByText('Test2')).toBeInTheDocument();
36    });
37  },
38};