Storybook Addon Vite Mock

1.1.1 verified Mon Apr 27 auth: no javascript

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.

Common errors

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

cause 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.

error TypeError: createMock is not a function ↓

cause Default import used instead of named import.

fix

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

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

cause Using Webpack-based Storybook framework.

fix

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

Warnings

gotcha The 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.

deprecated In 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.

gotcha createMock 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.

gotcha The 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.

breaking Version 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.

Install

npm install storybook-addon-vite-mock

yarn add storybook-addon-vite-mock

pnpm add storybook-addon-vite-mock

Imports

createMock

wrong

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

correct

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

Named export only; default import is not available.

viteMockPlugin

wrong

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

correct

import { viteMockPlugin } 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.

Quickstart

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 = {};