Can @storybook/test-runner display test coverage in terminal?

[grok-sean]

Summary

I have a recent implementation of Storybook 7.6, with play interaction tests inside stories as recommended with @storybook/test and using @storybook/test-runner and @storybook/addon-coverage but when I run test-storybook --coverage I don't get a coverage report displayed in the terminal.

I've made sure to include the coverage addon in the config, and I do get the coverage-storybook.json output to /coverage/storybook.

The summary indicates everything has passed, but lacks the table of stats

Test Suites: 15 passed, 15 total
Tests:       49 passed, 49 total
Snapshots:   49 passed, 49 total
Time:        8.805 s
Ran all test suites.
Coverage file (131855 bytes) written to .nyc_output/coverage.json

Most of the documentation pages that talk to test coverage show terminal output like this:

Wondering if anyone else has experienced this behaviour and whether there are missing parameters or config to output the coverage report in the terminal when using the latest version of Storybook and test-runner?

Additional information

Storybook dependencies:

    "@storybook/addon-a11y": "^7.6.9",
    "@storybook/addon-coverage": "^1.0.0",
    "@storybook/addon-essentials": "^7.6.9",
    "@storybook/addon-interactions": "^7.6.9",
    "@storybook/addon-links": "^7.6.9",
    "@storybook/addon-themes": "^7.6.9",
    "@storybook/blocks": "^7.6.9",
    "@storybook/manager-api": "^7.6.9",
    "@storybook/react": "^7.6.9",
    "@storybook/react-vite": "^7.6.9",
    "@storybook/test": "^7.6.9",
    "@storybook/test-runner": "^0.16.0",
    "@storybook/theming": "^7.6.9",
    "@storybook/web-components": "^7.6.9",

main.ts:

import { mergeConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-themes',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions',
    '@storybook/addon-coverage',
    'storybook-dark-mode',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  viteFinal(config) {
    return mergeConfig(config, {
      plugins: [tsconfigPaths()],
    });
  },
};
export default config;

Create a reproduction

No response

[valentinpalkovic]

Can you provide a minimal reproduction?

[grok-sean]

Hi @valentinpalkovic I have been able to reproduce in CodeSandbox with a baseline installation. There are no play functions written.

Repro -
https://codesandbox.io/p/sandbox/interesting-paper-boron-49xq54

1. npm run storybook
2. npm test -- runs test-storybook --coverage

It seems to present the same behaviour I am seeing in my own project.

[valentinpalkovic]

cc @yannbf

[yannbf]

Hey there @grok-sean ! Sorry I missed this, but the issue has been addressed and its fix is in 0.18.0. Please upgrade to that version and you shall get coverage reports!

[grok-sean]

Thanks so much for the new version! Can confirm it is working on 0.18 for my project.