Registry / testing / storybook-addon-fetch-mock

storybook-addon-fetch-mock

library2.0.1jsnpmunverified

A Storybook addon that integrates fetch-mock to mock fetch() calls in stories. Current stable version is 2.0.1, with quarterly releases. Supports Storybook 7, 8 and 'next' via @storybook/preview-api. Key differentiators vs alternatives: supports full Fetch mocking (unlike storybook-addon-mock which only handles basic cases), allows mocks as simple objects or resolver functions (like fetch-mock), and is a thin wrapper around the well-maintained fetch-mock library (available since 2015). Compared to MSW addon, it supports mock objects directly for APIs you don't control. Ships TypeScript types.

testing

npm install storybook-addon-fetch-mock

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · STORYBOOK-ADDON-FE

storybook-addon-fetch-mock

testingjavascriptv2.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-fetch-mock'

✗ const withMock = require('storybook-addon-fetch-mock')

ESM-only; CommonJS require() is not supported. Use static import.

fetchMock parameters

✓ export default { parameters: { fetchMock: { mocks: [...] } } }

✗ export default { fetchMock: { mocks: [...] } }

The configuration must be nested under parameters object in story meta.

withMock decorator

✓ export const decorators = [withMock];

✗ export default { decorators: withMock }

decorators must be an array; passing function directly is invalid.

Sets up the withMock decorator globally, then mocks a GET /api/users endpoint returning a JSON array.

// .storybook/preview.js import { withMock } from 'storybook-addon-fetch-mock'; export const decorators = [withMock]; // MyComponent.stories.js import MyComponent from './MyComponent'; export default { title: 'MyComponent', component: MyComponent, parameters: { fetchMock: { mocks: [ { matcher: { name: 'getUsers', url: 'path:/api/users', method: 'GET', }, response: { status: 200, body: [{ id: 1, name: 'Alice' }], }, }, ], }, }, }; export const Default = {};

Debug

Known issues

breakingVersion 2.0.0 dropped support for Storybook 6. Requires @storybook/preview-api >=7.0.0.

fix

Upgrade to Storybook 7+ and ensure @storybook/preview-api is installed as a peer dependency.

affects: >=2.0.0

breakingfetch-mock v11+ changed the matcher API; 'url' now requires full URL or path: protocol.

fix

Use 'path:' prefix for relative URL matching, e.g., matcher: { url: 'path:/api/users' }.

affects: >=2.0.0

deprecatedThe 'method' field in matcher is deprecated; use 'method' as a string (GET, POST etc.) directly.

fix

Set method as a plain string, not 'method: { method: 'GET' }'.

affects: >=1.0.0

gotchaMocks defined in parameters.fetchMock.mocks are not automatically reset between stories; may leak state.

fix

Use unique matcher names or reset in beforeEach handler using fetchMock.reset().

affects: >=1.0.0

Errors

Common errors & fixes

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

fetchMock parameter is missing or undefined in story parameters.

fix

Ensure story parameters object has fetchMock.mocks array: parameters: { fetchMock: { mocks: [] } }.

fetch-mock: No fallback response defined for GET path:/api/users

A fetch() call did not match any defined mock.

fix

Add a matching mock in parameters.fetchMock.mocks or allow unmatched requests by setting parameters.fetchMock.fallbackToNetwork.

Cannot read properties of undefined (reading 'type')

fetchMock global decorator was not applied before the story rendered.

fix

Add withMock to your decorators array in .storybook/preview.js or per-story.

Upgrade

Version history

2.0.1latest on npm

Audit

Dependencies

@storybook/preview-apirequiredPeer dependency to integrate with Storybook's preview frame

fetch-mockrequiredCore mocking library for fetch requests

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/JohnAlbin/storybook-addon-fetch-mock ↗

packagestorybook-addon-fetch-mock ↗

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