Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Manual Mocks
Mock your imports in the same way as Jest Manual Mocks do
npm install storybook-addon-manual-mocks
Last updated 2 months ago
13.7k
Downloads per week
Readme View on GitHub

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';
Join the community
6,588 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI