New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,409
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 6 months ago
3.6k
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

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI