or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-testing.mdfile-management.mdindex.mdtest-methods.md
tile.json

tessl/npm-storybook--addon-storyshots

Automated Jest snapshot testing addon for Storybook stories across multiple frameworks

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/addon-storyshots@7.6.x

To install, run

npx @tessl/cli install tessl/npm-storybook--addon-storyshots@7.6.0

index.mddocs/

StoryShots

⚠️ DEPRECATED: This addon is deprecated and will not receive further updates. Users should migrate to newer testing solutions as outlined in the Storybook migration guide.

StoryShots provides automated Jest snapshot testing for Storybook stories across multiple frameworks. It generates snapshot tests from existing stories, enabling visual regression testing and component consistency validation without manual test writing.

Package Information

  • Package Name: @storybook/addon-storyshots
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install @storybook/addon-storyshots --dev

Core Imports

import initStoryshots from "@storybook/addon-storyshots";

For specific test methods:

import initStoryshots, { 
  snapshot, 
  snapshotWithOptions,
  multiSnapshotWithOptions,
  renderOnly,
  renderWithOptions,
  shallowSnapshot,
  Stories2SnapsConverter 
} from "@storybook/addon-storyshots";

Basic Usage

// Basic setup - creates snapshots for all stories
import initStoryshots from "@storybook/addon-storyshots";

initStoryshots();
// With configuration options
import initStoryshots, { multiSnapshotWithOptions } from "@storybook/addon-storyshots";

initStoryshots({
  suite: "Custom Storyshots",
  storyKindRegex: /^MyComponent$/,
  test: multiSnapshotWithOptions(),
  configPath: ".storybook"
});

Architecture

StoryShots is built around several key components:

  • Initialization Function: initStoryshots() configures and runs snapshot tests for all stories
  • Test Methods: Different strategies for rendering and testing stories (snapshot, shallow, render-only)
  • Framework Support: Auto-detection and custom loaders for React, Angular, Vue, Preact, Svelte, and more
  • File Conversion: Maps story files to snapshot files with configurable naming conventions
  • Jest Integration: Leverages Jest's snapshot testing capabilities with custom serializers

Capabilities

Core Testing

Main snapshot testing functionality that automatically converts Storybook stories into Jest snapshot tests.

/**
 * Initialize snapshot testing for Storybook stories
 * @param options - Configuration options for snapshot testing
 */
function initStoryshots(options?: StoryshotsOptions): void;

interface StoryshotsOptions {
  asyncJest?: boolean;
  config?: (options: any) => void;
  integrityOptions?: GlobOptionsWithFileTypesFalse | false;
  configPath?: string;
  suite?: string;
  storyKindRegex?: RegExp | string;
  storyNameRegex?: RegExp | string;
  framework?: SupportedFramework;
  test?: StoryshotsTestMethod;
  renderer?: Function;
  snapshotSerializers?: jest.SnapshotSerializerPlugin[];
  serializer?: any; // Deprecated
  stories2snapsConverter?: Stories2SnapsConverter;
}

Core Testing

Test Methods

Various testing strategies for different use cases including standard snapshots, shallow rendering, multi-file snapshots, and render-only smoke testing.

/** Standard snapshot test method */
declare const snapshot: StoryshotsTestMethod;

/** Creates snapshot test with custom options */
function snapshotWithOptions(options?: SnapshotsWithOptionsArgType): SnapshotsWithOptionsReturnType;

/** Creates separate snapshot files for each story */
function multiSnapshotWithOptions(options?: SnapshotsWithOptionsArgType): StoryshotsTestMethod;

/** Shallow rendering snapshot test */
declare const shallowSnapshot: StoryshotsTestMethod;

/** Render-only test without snapshots (smoke testing) */
declare const renderOnly: StoryshotsTestMethod;

/** Custom rendering with options */
function renderWithOptions(options?: any): StoryshotsTestMethod;

interface StoryshotsTestMethod {
  (args: TestMethodOptions): any;
  beforeAll?: () => void | Promise<void>;
  beforeEach?: () => void | Promise<void>;
  afterAll?: () => void | Promise<void>;
  afterEach?: () => void | Promise<void>;
}

Test Methods

File Management

Story-to-snapshot file conversion system with configurable naming conventions and directory structures.

class Stories2SnapsConverter {
  constructor(options?: Partial<Stories2SnapsConverterOptions>);
  getSnapshotExtension(): string;
  getStoryshotFile(fileName: string): string;
  getSnapshotFileName(context: { fileName?: string; kind: any }): string | undefined;
  getPossibleStoriesFiles(storyshotFile: string): string[];
}

interface Stories2SnapsConverterOptions {
  storiesExtensions: string[]; // Default: ['.js', '.jsx', '.ts', '.tsx', '.mdx']
  snapshotExtension: string;   // Default: '.storyshot'
  snapshotsDirName: string;    // Default: '__snapshots__'
}

File Management

Framework Support

type SupportedFramework = 
  | "angular" 
  | "html" 
  | "preact" 
  | "react" 
  | "react-native" 
  | "svelte" 
  | "vue" 
  | "vue3" 
  | "web-components";

Types

interface TestMethodOptions {
  story: any;
  context: any;
  renderTree: RenderTree;
  renderShallowTree: RenderTree;
  stories2snapsConverter: Stories2SnapsConverter;
  snapshotFileName?: string;
  options: any;
  done?: () => void;
}

type SnapshotsWithOptionsArgType = Pick<StoryshotsOptions, "renderer" | "serializer"> | Function;

type SnapshotsWithOptionsReturnType = (
  options: Pick<TestMethodOptions, "story" | "context" | "renderTree" | "snapshotFileName">
) => any;

type RenderTree = (story: any, context: any, options?: any) => any;

Utilities

Jest Transform

// injectFileName.js - Jest transformer for injecting filename into stories
module.exports = {
  process(src: string, fileName: string, config: any, options: any): string;
};

Used in Jest configuration:

// jest.config.js
module.exports = {
  transform: {
    "^.+\\.stories\\.js$": "@storybook/addon-storyshots/injectFileName",
  },
};