tessl/npm-storybook--addon-storyshots

Automated Jest snapshot testing addon for Storybook stories across multiple frameworks

—

Pending

Overview

Eval results

Files

Core Testing

Name: tessl/npm-storybook--addon-storyshots
Author: tessl

Main snapshot testing functionality that automatically converts Storybook stories into Jest snapshot tests. This provides the primary interface for configuring and running snapshot tests across all stories in a Storybook project.

Capabilities

Initialize Storyshots

Sets up snapshot testing for all Storybook stories with configurable options.

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

Usage Examples:

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

// Basic initialization - tests all stories
initStoryshots();

// With custom suite name
initStoryshots({
  suite: "Visual Regression Tests"
});

// Filter specific story kinds
initStoryshots({
  storyKindRegex: /^Button|Input$/
});

// Custom config path
initStoryshots({
  configPath: path.join(__dirname, "custom-storybook-config")
});

Configuration Options

Complete configuration interface for customizing snapshot test behavior.

interface StoryshotsOptions {
  /** Enable async Jest testing with done callback */
  asyncJest?: boolean;
  
  /** Custom configuration function (like preview.js) */
  config?: (options: any) => void;
  
  /** Options for integrity testing of snapshot-story file consistency */
  integrityOptions?: GlobOptionsWithFileTypesFalse | false;
  
  /** Path to Storybook config directory or preview.js file */
  configPath?: string;
  
  /** Custom test suite name (default: "Storyshots") */
  suite?: string;
  
  /** Filter stories by kind/component name */
  storyKindRegex?: RegExp | string;
  
  /** Filter stories by story name */
  storyNameRegex?: RegExp | string;
  
  /** Target framework for auto-detection override */
  framework?: SupportedFramework;
  
  /** Custom test method */
  test?: StoryshotsTestMethod;
  
  /** Custom renderer function (e.g., enzyme mount) */
  renderer?: Function;
  
  /** Jest snapshot serializers */
  snapshotSerializers?: jest.SnapshotSerializerPlugin[];
  
  /** @deprecated Use snapshotSerializers instead */
  serializer?: any;
  
  /** Custom file converter instance */
  stories2snapsConverter?: Stories2SnapsConverter;
}

Configuration Examples:

// Async testing for components with async rendering
initStoryshots({
  asyncJest: true,
  test: ({ story, context, done }) => {
    const storyElement = story.render();
    const tree = mount(storyElement);
    
    setTimeout(() => {
      expect(toJson(tree.update())).toMatchSnapshot();
      done();
    }, 100);
  }
});

// Custom renderer with Enzyme
import { mount } from "enzyme";

initStoryshots({
  renderer: mount,
  snapshotSerializers: [require("enzyme-to-json/serializer")]
});

// Framework-specific setup
initStoryshots({
  framework: "react",
  configPath: path.join(__dirname, ".storybook"),
  integrityOptions: { cwd: __dirname }
});

Story Filtering

Filter which stories are included in snapshot testing.

// RegExp or string patterns for filtering
storyKindRegex?: RegExp | string;
storyNameRegex?: RegExp | string;

Filtering Examples:

// Test only Button components
initStoryshots({
  storyKindRegex: /^Button$/
});

// Test everything except components with "DontTest" in name
initStoryshots({
  storyKindRegex: /^((?!.*?DontTest).)*$/
});

// Test stories with "primary" in the name
initStoryshots({
  storyNameRegex: /primary/i
});

// Combine multiple filters
initStoryshots({
  storyKindRegex: /^(Button|Input)$/,
  storyNameRegex: /^(?!.*deprecated)/i
});

Framework Support

Automatic framework detection with manual override capability.

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

Framework Examples:

// Let StoryShots auto-detect framework
initStoryshots();

// Force specific framework
initStoryshots({
  framework: "react"
});

// Framework running outside app directory
initStoryshots({
  framework: "vue3",
  configPath: path.join(__dirname, ".storybook")
});

Integrity Testing

Verify that snapshot files match story files to prevent orphaned snapshots.

integrityOptions?: GlobOptionsWithFileTypesFalse | false;

Integrity Examples:

// Enable integrity testing
initStoryshots({
  integrityOptions: { 
    cwd: __dirname,
    ignore: ["**/deprecated/**"] 
  },
  test: multiSnapshotWithOptions()
});

// Disable integrity testing
initStoryshots({
  integrityOptions: false
});

Install with Tessl CLI

npx tessl i tessl/npm-storybook--addon-storyshots

docs