Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ 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 6 months ago
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:

module.exports = {
  addons: ['storybook-addon-manual-mocks'],

How to use

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

├── __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';


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,314 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI