Is there a way to report coverage for non-stories files?

[KL13NT]

Hi! I've successfully managed to eject my configuration and configured test-runner to execute my normal *.test.ts files. It works as expected, but these custom test files do not show up in coverage reports. Am I missing something?

// .storybook/main.cjs

module.exports = {
    async viteFinal(config) {
        return {
            ...config,
            resolve: {
                ...config.resolve,
                alias: {
                    ...config.resolve.alias,
                    "~": "/src",
                },
            },
        };
    },
    stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/addon-interactions",
        "@storybook/addon-a11y",
        {
            name: "@storybook/addon-coverage",
        },
        "storybook-addon-themes",
        "storybook-addon-react-router-v6",
    ],
    framework: "@storybook/react",
    core: {
        builder: "@storybook/builder-vite",
    },
    features: {
        storyStoreV7: true,
        interactionsDebugger: true, // 👈 Enable playback controls
    },
};

// test-runner-jest.config.js

import { getJestConfig } from "@storybook/test-runner";

const config = getJestConfig();

/**
 * @type {import('@jest/types').Config.InitialOptions}
 */
export default {
    // The default configuration comes from @storybook/test-runner
    ...config,
    /** Add your own overrides below
     * @see https://jestjs.io/docs/configuration
     */
    transform: {
        "^.+\\.scss$": "jest-scss-transform",
        ...config.transform,
    },
    modulePaths: ["src", "node_modules"],
    moduleNameMapper: {
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
            "<rootDir>/__mocks__/fileMock.js",
    },
    // reporters: ["jest-silent-reporter"],
    testMatch: ["**/*.test.ts", ...config.testMatch],
    setupFiles: ["./setupJest.js"],
    snapshotResolver: "./snapshot-resolver.cjs",
    collectCoverageFrom: ["src/**/*.ts"],
};

I get the following output when running npx test-storybook --coverage:

npx test-storybook --coverage                                                                                                                                           

 PASS   browser: chromium  src/core/utils/network.test.ts
 PASS   browser: chromium  src/core/components/sample-component/sample-component.stories.tsx (5.059 s)

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   1 passed, 1 total
Time:        7.172 s
Ran all test suites.
Coverage file (1971 bytes) written to .nyc_output\coverage.json
----------------------|---------|----------|---------|---------|-------------------
File                  | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------------------|---------|----------|---------|---------|-------------------
All files             |     100 |      100 |     100 |     100 |
 sample-component.tsx |     100 |      100 |     100 |     100 |
----------------------|---------|----------|---------|---------|-------------------

[kylegach]

Hi, Nabil! @storybook/test-runner is only ever intended to test (and therefore, provide coverage for) Storybook stories.

However, you can combine coverage from the test runner and other tools. You can find guidance in the test runner README: https://github.com/storybookjs/test-runner#3---merging-code-coverage-with-coverage-from-other-tools

If you wish to run all tests with a single command, you could set up your package scripts something like this:

"scripts": {
  "test": "jest",
  "test-storybook": "test-storybook",
  "test:all": "yarn test && yarn test-storybook"
}

The guidance linked above includes an example for doing something similar for generating coverage reports.

[KL13NT]

Hey @kylegach , this doesn't solve the problem of having Jest report all my snapshots as obsolete. Is there a way around this?

[yannbf]

Hey @kasperpeulen you have recently experienced with merging Storybook and non-Storybook tests in a single jest config. Do you have any ideas to help here? <3

[kasperpeulen]

@KL13NT @yannbf Yes, I merged them like this! https://github.com/kasperpeulen/storybook-remix/blob/main/jest-storybook.config.ts