Bug Report - Coverage Generation Issue with @storybook/test-runner

[aimad-majdou]

Describe the bug
I encountered an issue while attempting to generate coverage using @storybook/addon-coverage in the Storybook test runner. Following the documentation, I installed the necessary package and registered it in my .storybook/main.js file. However, when I ran yarn test-storybook --coverage, the coverage folder was not generated, and the coverage table did not appear in the console.

To Reproduce

• installed @storybook/test-runner
• Installed @storybook/addon-coverage and registered it in .storybook/main.js.
• Executed npm run storybook to start Storybook.
• Ran npm run test-storybook --coverage in a separate terminal.

Actual behavior
The coverage folder was not generated, and no coverage table was displayed in the console. There were no error messages or warnings related to coverage during the process.

Expected behavior
I expected the test runner to generate the coverage folder and display the coverage table in the console, as indicated in the documentation

Screenshots

System

Environment Info:

System:
OS: Windows 10 10.0.19045
CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
Binaries:
Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.79)
npmPackages:
@storybook/addon-coverage: 0.0.8 => 0.0.8
@storybook/addon-essentials: 7.0.27 => 7.0.27
@storybook/addon-interactions: 7.0.27 => 7.0.27
@storybook/addon-links: 7.0.27 => 7.0.27
@storybook/blocks: 7.0.27 => 7.0.27
@storybook/react: 7.0.27 => 7.0.27
@storybook/react-vite: 7.0.27 => 7.0.27
@storybook/test-runner: 0.11.0 => 0.11.0
@storybook/testing-library: 0.0.14-next.2 => 0.0.14-next.2

Additional context

main.ts file:

import type { StorybookConfig } from '@storybook/react-vite'
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-coverage',
      options: {
        istanbul: {
          include: ['**/stories/**'],
        },
      },
    },
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

vite.config.ts file:

import react from '@vitejs/plugin-react-swc'
import path from 'node:path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'
import { name } from './package.json'

export default defineConfig({
  plugins: [
    react(),
    dts({
      insertTypesEntry: true,
    }),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name,
      formats: ['es', 'umd'],
      fileName: (format) => `${name}.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
})

package.json :

{
  "name": "",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "coverage-report": "npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook",
    "test-storybook": "test-storybook",
    "test-storybook:coverage": "test-storybook --coverage"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@storybook/addon-coverage": "0.0.8",
    "@storybook/addon-essentials": "7.0.27",
    "@storybook/addon-interactions": "7.0.27",
    "@storybook/addon-links": "7.0.27",
    "@storybook/blocks": "7.0.27",
    "@storybook/react": "7.0.27",
    "@storybook/react-vite": "7.0.27",
    "@storybook/test-runner": "0.11.0",
    "@storybook/testing-library": "0.0.14-next.2",
    "@types/node": "20.4.2",
    "@types/react": "18.2.14",
    "@types/react-dom": "18.2.6",
    "@typescript-eslint/eslint-plugin": "5.61.0",
    "@typescript-eslint/parser": "5.61.0",
    "@vitejs/plugin-react-swc": "3.3.2",
    "eslint": "8.44.0",
    "eslint-plugin-react-hooks": "4.6.0",
    "eslint-plugin-react-refresh": "0.4.1",
    "eslint-plugin-storybook": "0.6.12",
    "nyc": "15.1.0",
    "prop-types": "15.8.1",
    "storybook": "7.0.27",
    "typescript": "5.0.2",
    "vite": "4.4.4",
    "vite-plugin-dts": "3.3.1"
  }
}

[yannbf]

Hey @aimad-majdou thank you so much for all the info! Would it be possible to share a reproduction repo? That would make things much easier to investigate!

thanks!

[truburn]

I'm having the same problem. The tests run and then no table for coverage and no folder generated. https://github.com/truburn/chonky-dragon

[yannbf]

Hey there! Thank you so much for opening this issue, and everyone for the repro and additional info! I released v0.12.0 which should contain a fix, please try it out and let me know <3

[timkolotov]

0.12 works for us nicely - the coverage report is generated and also is visible in the console output. Thanks!