Registry / testing / storybook-addon-vite-mock

storybook-addon-vite-mock

library1.1.1jsnpmunverified

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.

testing web-framework http-networking

npm install storybook-addon-vite-mock

github ↗package ↗

INSTALL

IMPORT

SIG · STORYBOOK-ADDON-VI

storybook-addon-vite-mock

testingjavascriptv1.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

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

createMock

✓ import { createMock } from 'storybook-addon-vite-mock'

✗ import createMock from 'storybook-addon-vite-mock'

Named export only; default import is not available.

viteMockPlugin

✓ import { viteMockPlugin } from 'storybook-addon-vite-mock'

✗ import { vitePluginMock } from 'storybook-addon-vite-mock'

Used in Storybook 9+ manual Vite config merge.

MockOptions

✓ import type { MockOptions } from 'storybook-addon-vite-mock'

TypeScript type for configure() options.

Set up the addon in Storybook config and create a mock for a module import in a story.

// .storybook/main.ts import { mergeConfig } from 'vite'; import { viteMockPlugin } from 'storybook-addon-vite-mock'; import type { StorybookConfig } from '@storybook/react-vite'; const config: StorybookConfig = { stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'], addons: ['storybook-addon-vite-mock'], framework: { name: '@storybook/react-vite', options: {} }, viteFinal(config) { config.plugins?.push(viteMockPlugin()); return config; }, }; export default config; // Button.stories.tsx import { createMock } from 'storybook-addon-vite-mock'; import { fn } from '@storybook/test'; import { Button } from './Button'; import { Test } from './test'; createMock('./test', { Test: fn() }); export default { component: Button }; export const Mocked = {};

Debug

Known issues

gotchaThe addon requires Vite as the Storybook builder; does not work with Webpack.

fix

Use a Vite-based framework like @storybook/react-vite or @storybook/nextjs-vite.

affects: >=1.0.0

deprecatedIn Storybook 10+, the addon is added as a normal addon entry; do not use viteFinal if not needed.

fix

Remove viteFinal if you only need Storybook 10; add 'storybook-addon-vite-mock' to addons array.

affects: >=1.1.0

gotchacreateMock must be called before the story renders; it is not a hook.

fix

Place createMock calls at top level of story file, not inside a component or effect.

affects: >=1.0.0

gotchaThe include/exclude option only affects storybook build (Babel-based), not storybook dev (Vite).

fix

Do not rely on include/exclude for filtering in dev mode; they are ignored.

affects: >=1.0.0

breakingVersion 1.1.0 dropped support for Storybook 8; only Storybook 9 and 10 are supported.

fix

Upgrade Storybook to version 9 or 10, or stay on storybook-addon-vite-mock@1.0.x.

affects: >=1.1.0

Errors

Common errors & fixes

Cannot find module 'storybook-addon-vite-mock' or its corresponding type declarations.

Package not installed or missing type definitions.

fix

Run `npm install --save-dev storybook-addon-vite-mock` and ensure tsconfig.json includes node_modules types.

TypeError: createMock is not a function

Default import used instead of named import.

fix

Change to `import { createMock } from 'storybook-addon-vite-mock'`.

The addon 'storybook-addon-vite-mock' is not compatible with the current builder (webpack).

Using Webpack-based Storybook framework.

fix

Switch to a Vite-based framework like @storybook/react-vite.

Upgrade

Version history

1.1.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

16 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/node-libraries/storybook-addon-vite-mock ↗

packagehttps://www.npmjs.com/package/storybook-addon-vite-mock ↗