Storybook Addon Manual Mocks

The Storybook Manual Mocks addon can be used to Mocking your imports as Manual Mocks in Jest

Getting Started

Install this addon by adding the storybook-addon-manual-mocks dependency:

1yarn add -D storybook-addon-manual-mocks
2
3# or
4
5npm install --save-dev storybook-addon-manual-mocks

within .storybook/main.js:

Universal config for vite and webpack

1module.exports = {
2  addons: [
3    {
4      name: "storybook-addon-manual-mocks",
5      options: {
6        mocksFolder: "__mocks__",
7      }
8    }
9  ],
10};

Specific vite config

1module.exports = {
2  addons: [
3    {
4      name: "storybook-addon-manual-mocks/vite",
5      options: {
6        mocksFolder: "__mocks__",
7      }
8    }
9  ],
10};

Specific webpack config

1module.exports = {
2  addons: [
3    {
4      name: "storybook-addon-manual-mocks/webpack",
5      options: {
6        mocksFolder: "__mocks__",
7      }
8    }
9  ],
10};

Available options

Name	Type	Default	Description
mocksFolder	string	"__mocks__"	Custom mocks folder

How to use

You can extract you server querying from components to hooks and mock those files

MyComponent
├── __mocks__
│   └── MyComponent.hooks.js
├── MyComponent.component.js
├── MyComponent.stories.js
├── MyComponent.hooks.js
└── index.js

When you will import MyComponent.hooks in MyComponent.component.js, file from __mocks__ directory will be used instead

1import { useSomeData } from 'MyComponent.hooks';
2// it will import mock under the hood '__mocks__/MyComponent.hooks';

Important

This addon works only with relative imports(./ or ../) for example

1// ✅ this CAN be mocked
2import { useSomeData } from './MyComponent.hooks';
3
4// ✅ this CAN be mocked
5import { useSomeData } from '../MyComppnent/MyComponent.hooks';
6
7// ⛔️ this CAN'T be mocked
8import { useSomeData } from '@monorepo/components/MyComponent/MyComponent.hooks';
9
10// ✅ this CAN be mocked
11// Because inside the package, MyComponent.hooks was imported relatively
12// `./MyComponent.hooks` by `MyComponent/index.js`, so it will be mocked correctly
13import { useSomeData } from '@monorepo/components';