@pilmee/storybook-addon-jest

ESM addon for Storybook >=10 that adds a Tests panel and shows only the tests and coverage related to the component rendered by the active story.

Requirements

• Storybook >=10
• Node.js >=20.19
• A Jest JSON report generated with --json --coverage

Installation

npm install --save-dev @pilmee/storybook-addon-jest

Register the addon immediately after Accessibility. Storybook keeps the addons array order when rendering panels:

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  addons: [
    '@storybook/addon-a11y',
    {
      name: '@pilmee/storybook-addon-jest',
      options: {
        reportPath: './jest-report.json',
      },
    },
  ],
};

export default config;

reportPath is a browser-read URL relative to the published Storybook. The recommended setup is to generate the file inside the same folder as the static Storybook build, after Storybook has been built:

{
  "scripts": {
    "build-storybook": "storybook build",
    "test:storybook-report": "jest --json --coverage --outputFile=storybook-static/jest-report.json",
    "storybook:ci": "npm run build-storybook && npm run test:storybook-report"
  }
}

Using a relative path (./jest-report.json) also works when Storybook is published under a subdirectory.

For local development, generate the file in a folder served through staticDirs:

// .storybook/main.ts
const config = {
  staticDirs: [{ from: '../storybook-reports', to: '/' }],
  addons: [
    '@storybook/addon-a11y',
    {
      name: '@pilmee/storybook-addon-jest',
      options: { reportPath: './jest-report.json' },
    },
  ],
};

jest --json --coverage --outputFile=storybook-reports/jest-report.json

How Stories Are Matched With Jest

By default, the addon infers the component from the story import path:

src/components/Button/Button.stories.tsx
                         ↓
src/components/Button/Button.tsx
src/components/Button/Button.test.tsx

It first selects suites whose coverage includes the component file. As a fallback, it compares *.test.* or *.spec.* paths. From global coverage, it keeps only the inferred component file.

When a story does not follow that convention, for example when it imports from an index.ts, declare the path explicitly in the CSF meta:

const meta = {
  component: Button,
  parameters: {
    jest: {
      componentPath: 'src/components/Button/Button.tsx',
    },
  },
};

export default meta;

You can also override reportPath or disable the panel for a story/component:

parameters: {
  jest: {
    reportPath: './reports/unit.json',
    disable: true,
  },
}

Utility API

The package exports filterJestReport(report, storyImportPath, componentPath?) and inferComponentPath(storyImportPath) so the filtering logic can be reused or tested directly.