{"id":22411,"library":"storybook-addon-vite-mock","title":"Storybook Addon Vite Mock","description":"A Storybook addon that provides Jest-like module mocking for Vite-based Storybook projects (v10+). Version 1.1.1 is current, with active development on GitHub. It replaces module imports with mock implementations during Storybook stories, using a Vite plugin and a createMock function. Unlike traditional Jest mocks that require a test runner, this addon works directly in Storybook's preview environment, allowing visual testing of components with mocked dependencies. It supports @storybook/react-vite and @storybook/nextjs-vite frameworks. The mockRestore() is automatic after story unmount. Configuration via addon options allows include/exclude patterns for builds. Ships TypeScript types.","status":"active","version":"1.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/node-libraries/storybook-addon-vite-mock","tags":["javascript","storybook","react","test","jest","mock","vite","module","import","typescript"],"install":[{"cmd":"npm install storybook-addon-vite-mock","lang":"bash","label":"npm"},{"cmd":"yarn add storybook-addon-vite-mock","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook-addon-vite-mock","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Named export only; default import is not available.","wrong":"import createMock from 'storybook-addon-vite-mock'","symbol":"createMock","correct":"import { createMock } from 'storybook-addon-vite-mock'"},{"note":"Used in Storybook 9+ manual Vite config merge.","wrong":"import { vitePluginMock } from 'storybook-addon-vite-mock'","symbol":"viteMockPlugin","correct":"import { viteMockPlugin } from 'storybook-addon-vite-mock'"},{"note":"TypeScript type for configure() options.","wrong":"","symbol":"MockOptions","correct":"import type { MockOptions } from 'storybook-addon-vite-mock'"}],"quickstart":{"code":"// .storybook/main.ts\nimport { mergeConfig } from 'vite';\nimport { viteMockPlugin } from 'storybook-addon-vite-mock';\nimport type { StorybookConfig } from '@storybook/react-vite';\n\nconst config: StorybookConfig = {\n  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],\n  addons: ['storybook-addon-vite-mock'],\n  framework: { name: '@storybook/react-vite', options: {} },\n  viteFinal(config) {\n    config.plugins?.push(viteMockPlugin());\n    return config;\n  },\n};\nexport default config;\n\n// Button.stories.tsx\nimport { createMock } from 'storybook-addon-vite-mock';\nimport { fn } from '@storybook/test';\nimport { Button } from './Button';\nimport { Test } from './test';\n\ncreateMock('./test', { Test: fn() });\n\nexport default { component: Button };\nexport const Mocked = {};","lang":"typescript","description":"Set up the addon in Storybook config and create a mock for a module import in a story."},"warnings":[{"fix":"Use a Vite-based framework like @storybook/react-vite or @storybook/nextjs-vite.","message":"The addon requires Vite as the Storybook builder; does not work with Webpack.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Remove viteFinal if you only need Storybook 10; add 'storybook-addon-vite-mock' to addons array.","message":"In Storybook 10+, the addon is added as a normal addon entry; do not use viteFinal if not needed.","severity":"deprecated","affected_versions":">=1.1.0"},{"fix":"Place createMock calls at top level of story file, not inside a component or effect.","message":"createMock must be called before the story renders; it is not a hook.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Do not rely on include/exclude for filtering in dev mode; they are ignored.","message":"The include/exclude option only affects storybook build (Babel-based), not storybook dev (Vite).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade Storybook to version 9 or 10, or stay on storybook-addon-vite-mock@1.0.x.","message":"Version 1.1.0 dropped support for Storybook 8; only Storybook 9 and 10 are supported.","severity":"breaking","affected_versions":">=1.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev storybook-addon-vite-mock` and ensure tsconfig.json includes node_modules types.","cause":"Package not installed or missing type definitions.","error":"Cannot find module 'storybook-addon-vite-mock' or its corresponding type declarations."},{"fix":"Change to `import { createMock } from 'storybook-addon-vite-mock'`.","cause":"Default import used instead of named import.","error":"TypeError: createMock is not a function"},{"fix":"Switch to a Vite-based framework like @storybook/react-vite.","cause":"Using Webpack-based Storybook framework.","error":"The addon 'storybook-addon-vite-mock' is not compatible with the current builder (webpack)."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}