Registry / testing / storybook-addon-mock

storybook-addon-mock

library6.0.1jsnpmunverified

A Storybook addon for mocking fetch and XMLHttpRequest requests in component stories. Version 6.0.1 requires Storybook 9.0.12+ and React 16.8+. It provides a dedicated panel to view, enable/disable, modify status codes, edit JSON responses, and add delay. Unlike other mocking libraries, it integrates directly with Storybook's UI for an interactive debugging experience. Ships TypeScript types.

testing

npm install storybook-addon-mock

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · STORYBOOK-ADDON-MO

storybook-addon-mock

testingjavascriptv6.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

withMock

✓ import { withMock } from 'storybook-addon-mock'

✗ import withMock from 'storybook-addon-mock'

withMock is a named export, not default.

MockPayload

✓ import type { MockPayload } from 'storybook-addon-mock'

✗ import { MockPayload } from 'storybook-addon-mock'

MockPayload is a TypeScript type; use 'import type' for type-only imports.

MockResponse

✓ import type { MockResponse } from 'storybook-addon-mock'

✗ import { MockResponse } from 'storybook-addon-mock'

MockResponse is a TypeScript type.

Add storybook-addon-mock to Storybook and use the withMock decorator with mockData parameter to intercept fetch/XHR requests.

// .storybook/main.js module.exports = { stories: ['../src/**/*.stories.@(ts|tsx)'], addons: ['storybook-addon-mock'], }; // Button.stories.tsx import { withMock, MockPayload } from 'storybook-addon-mock'; import Button from './Button'; export default { title: 'Button', component: Button, decorators: [withMock], }; export const Default = { parameters: { mockData: [ { url: 'https://api.example.com/data', method: 'GET', status: 200, response: { message: 'Hello' }, delay: 500, } as MockPayload, ], }, };

Debug

Known issues

breakingVersion 6.0.0+ drops support for Storybook <9.0.12. Upgrade Storybook to 9.x.

fix

Update Storybook to version ^9.0.12 and ensure addon peer dependency is satisfied.

affects: >=6.0.0

gotchaThe withMock decorator must be applied globally or per story for mockData to work. Omitting it will cause requests to pass through unmocked.

fix

Add decorators: [withMock] to your story default export or globally in .storybook/preview.js.

affects: *

gotchamockData array entries require the url to match exactly (including query params). Trailing slashes matter.

fix

Ensure the url property exactly matches the request URL, including query strings. Use ?key=value format if needed.

affects: *

gotchaIf you use TypeScript and import MockPayload or MockResponse incorrectly as values, you may get runtime errors.

fix

Use import type { MockPayload } from 'storybook-addon-mock' to avoid emitting unused JavaScript.

affects: *

Errors

Common errors & fixes

Module not found: Can't resolve 'storybook-addon-mock'

Addon not installed or listed in package.json.

fix

Run npm install storybook-addon-mock --save-dev or yarn add storybook-addon-mock --dev.

TypeError: Cannot read properties of undefined (reading 'mockData')

withMock decorator not applied, so mockData parameter is not processed.

fix

Add decorators: [withMock] to your story default export or globally.

Warning: Received `true` for a non-boolean attribute `data-mocked`.

Using non-standard attribute on a DOM element; harmless but indicates mock injection issue.

fix

Ensure your component renders a wrapper element or ignore the warning.

Upgrade

Version history

6.0.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for addon UI rendering

react-domrequiredPeer dependency for addon UI rendering

storybookrequiredPeer dependency; addon requires Storybook 9.x to function

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/nutboltu/storybook-addon-mock ↗

packagestorybook-addon-mock ↗

homepagehttps://github.com/nutboltu/storybook-addon-mock#readme ↗