or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

build-management.mdconfiguration.mdindex.mdstorybook-integration.mdvisual-test-modes.md
tile.json

storybook-integration.mddocs/

Storybook Integration

Core Storybook addon functionality including preset configuration, manager UI registration, and automatic setup for visual testing capabilities.

Capabilities

Preset Configuration

Server-side Storybook preset that configures the addon for visual testing. Automatically loaded via package.json exports.

/**
 * Default preset configuration object exported from preset entry
 * Configures Storybook server-side integration
 */
interface PresetConfig {
  /** Function returning paths to manager-side bundle files */
  managerEntries: () => string[];
  /** Server channel handler for addon communication */
  experimental_serverChannel: (channel: any) => void;
  /** Static directory configuration for addon assets */
  staticDirs: () => string[];
  /** Environment variable configuration */
  env: () => Record<string, string>;
}

declare const preset: PresetConfig;
export default preset;

Usage Example:

// .storybook/main.ts
export default {
  addons: [
    '@chromatic-com/storybook', // Automatically loads preset
  ],
};

Manager Registration

Registers the Visual Tests panel in Storybook's manager UI and sets up addon functionality.

/**
 * Manager-side addon registration
 * Automatically executed when Storybook loads the manager bundle
 */
interface ManagerRegistration {
  /** Register addon with Storybook's addon API */
  register(): void;
  /** Add Visual Tests panel to Storybook UI */
  addPanel(): void;
  /** Configure test provider for development mode */
  configureTestProvider(): void;
}

The manager integration provides:

  • Visual Tests panel in Storybook sidebar
  • Real-time build progress display
  • Integration with Storybook's experimental status store
  • Automatic addon discovery and configuration

Main Entry Point

Minimal main entry point for the package.

/**
 * Main package entry point
 * Currently provides empty default export
 */
declare const main: {};
export default main;

Development Entry

Development-specific configuration extending the base preset for local development.

/**
 * Development preset configuration
 * Extends base preset with development-specific manager entries
 */
interface DevPresetConfig extends PresetConfig {
  managerEntries: () => string[];
}

declare const devPreset: DevPresetConfig;
export default devPreset;

Usage Example:

// For local development
// CHROMATIC_ADDON_NAME='../src/dev.ts' storybook dev

Package Exports

The addon provides multiple entry points through package.json exports:

{
  "exports": {
    ".": "./dist/index.js",           // Main entry
    "./manager": "./dist/manager.js", // Manager UI
    "./preset": "./dist/preset.js",   // Server preset
    "./package.json": "./package.json"
  }
}

Story Parameters

Configure visual testing behavior on individual stories or globally.

interface ChromaticParameters {
  /** Visual test mode configurations */
  modes?: Record<string, VisualTestMode>;
  /** Disable visual testing for this story */
  disable?: boolean;
  /** Force snapshot for this story */
  force?: boolean;
  /** Delay before taking snapshot (ms) */
  delay?: number;
  /** Pause animation during snapshot */
  pauseAnimationAtEnd?: boolean;
}

interface StoryParameters {
  chromatic?: ChromaticParameters;
}

Usage Examples:

// Global configuration in .storybook/main.ts
export default {
  parameters: {
    chromatic: {
      modes: {
        light: { theme: 'light' },
        dark: { theme: 'dark' },
        mobile: { viewport: { width: 375, height: 667 } },
      },
    },
  },
};

// Story-specific configuration
export const MyStory = {
  parameters: {
    chromatic: {
      disable: true, // Skip visual testing for this story
    },
  },
};

export const AnimatedStory = {
  parameters: {
    chromatic: {
      delay: 1000, // Wait 1 second before snapshot
      pauseAnimationAtEnd: true,
    },
  },
};