{"id":49446,"library":"storybook-addon-mock","title":"Storybook Addon Mock","description":"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.","status":"active","version":"6.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/nutboltu/storybook-addon-mock","tags":["javascript","storybook","mock","http-mock","fetch-mock","xhr-mock","mock-data","storybook-addon","data-state","typescript"],"install":[{"cmd":"npm install storybook-addon-mock","lang":"bash","label":"npm"},{"cmd":"yarn add storybook-addon-mock","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook-addon-mock","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for addon UI rendering","package":"react","optional":false},{"reason":"Peer dependency for addon UI rendering","package":"react-dom","optional":false},{"reason":"Peer dependency; addon requires Storybook 9.x to function","package":"storybook","optional":false}],"imports":[{"note":"withMock is a named export, not default.","wrong":"import withMock from 'storybook-addon-mock'","symbol":"withMock","correct":"import { withMock } from 'storybook-addon-mock'"},{"note":"MockPayload is a TypeScript type; use 'import type' for type-only imports.","wrong":"import { MockPayload } from 'storybook-addon-mock'","symbol":"MockPayload","correct":"import type { MockPayload } from 'storybook-addon-mock'"},{"note":"MockResponse is a TypeScript type.","wrong":"import { MockResponse } from 'storybook-addon-mock'","symbol":"MockResponse","correct":"import type { MockResponse } from 'storybook-addon-mock'"}],"quickstart":{"code":"// .storybook/main.js\nmodule.exports = {\n  stories: ['../src/**/*.stories.@(ts|tsx)'],\n  addons: ['storybook-addon-mock'],\n};\n\n// Button.stories.tsx\nimport { withMock, MockPayload } from 'storybook-addon-mock';\nimport Button from './Button';\n\nexport default {\n  title: 'Button',\n  component: Button,\n  decorators: [withMock],\n};\n\nexport const Default = {\n  parameters: {\n    mockData: [\n      {\n        url: 'https://api.example.com/data',\n        method: 'GET',\n        status: 200,\n        response: { message: 'Hello' },\n        delay: 500,\n      } as MockPayload,\n    ],\n  },\n};","lang":"typescript","description":"Add storybook-addon-mock to Storybook and use the withMock decorator with mockData parameter to intercept fetch/XHR requests."},"warnings":[{"fix":"Update Storybook to version ^9.0.12 and ensure addon peer dependency is satisfied.","message":"Version 6.0.0+ drops support for Storybook <9.0.12. Upgrade Storybook to 9.x.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Add decorators: [withMock] to your story default export or globally in .storybook/preview.js.","message":"The withMock decorator must be applied globally or per story for mockData to work. Omitting it will cause requests to pass through unmocked.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure the url property exactly matches the request URL, including query strings. Use ?key=value format if needed.","message":"mockData array entries require the url to match exactly (including query params). Trailing slashes matter.","severity":"gotcha","affected_versions":"*"},{"fix":"Use import type { MockPayload } from 'storybook-addon-mock' to avoid emitting unused JavaScript.","message":"If you use TypeScript and import MockPayload or MockResponse incorrectly as values, you may get runtime errors.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"search_vec":"'16.8':23 '6.0.1':17 '9.0.12':20 'add':39 'addon':2,6,77 'code':34 'compon':14 'data':74,79 'data-st':78 'debug':55 'dedic':27 'delay':40 'direct':47 'edit':35 'enable/disable':31 'experi':56 'fetch':9,67 'fetch-mock':66 'http':64 'http-mock':63 'integr':46 'interact':54 'javascript':60 'json':36 'librari':44 'mock':3,8,43,62,65,68,71,73 'mock-data':72 'modifi':32 'panel':28 'provid':25 'react':22 'request':12 'requir':18 'respons':37 'ship':57 'state':80 'status':33 'stori':15 'storybook':1,5,19,49,61,76 'storybook-addon':75 'type':59 'typescript':58,81 'ui':51 'unlik':41 'version':16 'view':30 'xhr':70 'xhr-mock':69 'xmlhttprequest':11","created_at":"2026-06-07T17:01:49.214718+00:00","updated_at":"2026-06-07T17:01:49.214718+00:00","problems":[{"fix":"Run npm install storybook-addon-mock --save-dev or yarn add storybook-addon-mock --dev.","cause":"Addon not installed or listed in package.json.","error":"Module not found: Can't resolve 'storybook-addon-mock'"},{"fix":"Add decorators: [withMock] to your story default export or globally.","cause":"withMock decorator not applied, so mockData parameter is not processed.","error":"TypeError: Cannot read properties of undefined (reading 'mockData')"},{"fix":"Ensure your component renders a wrapper element or ignore the warning.","cause":"Using non-standard attribute on a DOM element; harmless but indicates mock injection issue.","error":"Warning: Received `true` for a non-boolean attribute `data-mocked`."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/nutboltu/storybook-addon-mock#readme","github":"https://github.com/nutboltu/storybook-addon-mock","docs":null,"changelog":null,"pypi":null,"npm":"storybook-addon-mock","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}