or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-storybook--addon-jest

Storybook addon that displays Jest test results directly within Storybook's addon panel for enhanced development workflow.

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

To install, run

npx @tessl/cli install tessl/npm-storybook--addon-jest@9.1.0

index.mddocs/

Storybook Jest Addon

The Storybook Jest addon displays Jest unit test results directly within Storybook's addon panel. It integrates with Jest test output by consuming JSON test results files and presenting them alongside component stories for enhanced development workflow.

Package Information

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

Storybook Configuration

Add the addon to your .storybook/main.js:

export default {
  addons: ['@storybook/addon-jest'],
};

Core Imports

import { withTests } from "@storybook/addon-jest";

For CommonJS:

const { withTests } = require("@storybook/addon-jest");

Basic Usage

import { withTests } from "@storybook/addon-jest";
import results from "../.jest-test-results.json";

// Story-level configuration
export default {
  component: MyComponent,
  title: "MyComponent",
  decorators: [withTests({ results })],
};

export const Default = Template.bind({});
Default.parameters = {
  jest: ["MyComponent.test.js"],
};

Global configuration in .storybook/preview.js:

import { withTests } from "@storybook/addon-jest";
import results from "../.jest-test-results.json";

export const decorators = [
  withTests({
    results,
  }),
];

Capabilities

Jest Test Integration

The withTests decorator provides the core functionality for integrating Jest test results with Storybook stories.

/**
 * Creates a Storybook decorator that attaches Jest test results to stories
 * @param userOptions Configuration options for test integration
 * @returns Storybook decorator function
 */
function withTests(userOptions: WithTestsOptions): (...args: any[]) => any;

interface WithTestsOptions {
  /** Jest test results object (required) */
  results: any;
  /** Test file extension regex pattern (optional, defaults to '((\\.specs?)|(\\.tests?))?(\\.[jt]sx?)?$') */
  filesExt?: string;
}

interface JestTestResults {
  testResults: Array<{
    name: string;
    status: string;
    startTime?: number;
    endTime?: number;
    assertionResults: AssertionResult[];
  }>;
}

interface AssertionResult {
  status: string;
  fullName: string;
  title: string;
  failureMessages: string[];
}

Jest Parameter Configuration

Configure which test files should be displayed for specific stories using the jest parameter.

interface JestParameters {
  /**
   * Jest configuration for stories
   * - string: Single test file name
   * - string[]: Array of test file names  
   * - {disabled: true}: Disable tests for this story
   * - undefined: Auto-infer from story file name
   */
  jest?: string | string[] | { disabled: true };
}

Usage in story parameters:

// Single test file
Default.parameters = {
  jest: "MyComponent.test.js"
};

// Multiple test files
Default.parameters = {
  jest: ["MyComponent.test.js", "MyOtherComponent.test.js"]
};

// Disable tests
Default.parameters = {
  jest: { disabled: true }
};

// Auto-infer from story file name (no parameter needed)

Configuration Options

File Extension Patterns

Customize which test files are matched using the filesExt option:

// Default pattern matches multiple extensions
const defaultPattern = '((\\.specs?)|(\\.tests?))?(\\.[jt]sx?)?$';

// Custom pattern for Angular projects
export const decorators = [
  withTests({
    results,
    filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$',
  }),
];

Jest Configuration

Generate test results JSON file by running Jest with specific flags:

# Generate test results for the addon
jest --json --outputFile=.jest-test-results.json

# Watch mode for development
jest --json --outputFile=.jest-test-results.json --watch

Add to jest.config.js to prevent infinite loops:

module.exports = {
  modulePathIgnorePatterns: ['node_modules', '.jest-test-results.json'],
};

Types

// Core types for test integration
interface WithTestsOptions {
  results: any;
  filesExt?: string;
}

interface JestParameters {
  /**
   * Jest configuration
   * - string: Single test file name
   * - string[]: Array of test file names  
   * - {disabled: true}: Disable tests for this story
   * - undefined: Auto-infer from story file name
   */
  jest?: string | string[] | { disabled: true };
}

// Test result interfaces (from Jest output format)
interface AssertionResult {
  status: string;
  fullName: string;
  title: string;
  failureMessages: string[];
}

interface TestResult {
  name: string;
  status: string;
  startTime?: number;  
  endTime?: number;
  assertionResults: AssertionResult[];
}

interface Test {
  name: string;
  result: TestResult;
}

Error Handling

The addon handles various edge cases gracefully:

  • Missing test files: Displays placeholder message when configured tests aren't found
  • Invalid jest parameter: Ignores malformed parameters and falls back to auto-inference
  • Empty test results: Shows "No tests found" message in panel
  • Failed tests: Displays expandable failure messages with syntax highlighting
  • Network/file issues: Gracefully handles missing or malformed test result files

Framework Support

The addon supports all Storybook-compatible frameworks except React Native:

  • React
  • Angular
  • Vue
  • Web Components
  • HTML
  • Svelte
  • And other frameworks supported by Storybook

For Angular projects, use the custom filesExt pattern shown in the configuration section above.