gebeto / storybook-addon-manual-mocks

Manual Mocks addon for Storybook

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:

yarn add -D storybook-addon-manual-mocks

# or

npm install --save-dev storybook-addon-manual-mocks

within .storybook/main.js:

Universal config for vite and webpack

module.exports = {
  addons: [
    {
      name: "storybook-addon-manual-mocks",
      options: {
        mocksFolder: "__mocks__",
      }
    }
  ],
};

Specific vite config

module.exports = {
  addons: [
    {
      name: "storybook-addon-manual-mocks/vite",
      options: {
        mocksFolder: "__mocks__",
      }
    }
  ],
};

Specific webpack config

module.exports = {
  addons: [
    {
      name: "storybook-addon-manual-mocks/webpack",
      options: {
        mocksFolder: "__mocks__",
      }
    }
  ],
};

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

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

Important

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

// ✅ this CAN be mocked
import { useSomeData } from './MyComponent.hooks';

// ✅ this CAN be mocked
import { useSomeData } from '../MyComppnent/MyComponent.hooks';

// ⛔️ this CAN'T be mocked
import { useSomeData } from '@monorepo/components/MyComponent/MyComponent.hooks';

// ✅ this CAN be mocked
// Because inside the package, MyComponent.hooks was imported relatively
// `./MyComponent.hooks` by `MyComponent/index.js`, so it will be mocked correctly
import { useSomeData } from '@monorepo/components';