Storybook sb.mock() — next-generation module mocking eliminates configuration overhead¶
Insight: Storybook's new sb.mock() API replaces the previous manual Subpath Imports approach for mocking module dependencies in stories. Powered by Vitest's mocking engine but deeply integrated into Storybook's workflow, it works with both Vite and Webpack in dev and production modes. A single line in preview.ts can mock any module globally, with no changes to component source code. This significantly lowers the barrier for creating isolated, deterministic component stories.
Detail: Three mocking modes: (1) automocking without mock files — sb.mock('...', { spy: true }) wraps all exports in spies that call original functions while recording interactions, (2) automocking with mock files — uses co-located .mock.ts files as automatic replacements, (3) per-story configuration — override mock behavior in individual stories using mocked() imports. The API is fully type-safe. This addresses a long-standing pain point: previously, mocking browser APIs like localStorage or authentication-dependent components required manual package.json subpath imports configuration.
Sources
Related: existing entry "Storybook 9 GA" in batch-1/design-systems.md — COMPLEMENTS