[Bug] Impossible to instrument code properly with storybook-react-rsbuild

[malinskibeniamin]

Cross-posting rspack-contrib/storybook-rsbuild#127

Describe the bug

When upgrading to storybook-react-rsbuild from webpack or vite setup, the code instrumentation does not work properly to obtain code coverage.

Dependencies:

    "@rsbuild/core": "1.0.7",
    "@rsbuild/plugin-react": "1.0.2",
    "@rsbuild/plugin-sass": "1.0.1",
    "@rsbuild/plugin-svgr": "1.0.2",
    "@storybook/addon-coverage": "^1.0.4",
    "@storybook/react": "^8.3.3",
    "@storybook/test": "^8.3.3",
    "@storybook/test-runner": "^0.19.1",
    "@testing-library/jest-dom": "^6.4.6",
    "@testing-library/react": "^16.0.0",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.11",
    "@types/node": "^20.8.10",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "babel-plugin-istanbul": "^7.0.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "storybook": "^8.3.3",
    "storybook-react-rsbuild": "^0.1.0",
    "typescript": "4.9.5"

Rsbuild config:

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSvgr } from '@rsbuild/plugin-svgr';
import { pluginSass } from '@rsbuild/plugin-sass';

export default defineConfig({
  plugins: [
    pluginReact({
      reactRefreshOptions: {
        forceEnable: true,
      },
    }),
    pluginSvgr({ mixedImport: true }),
    pluginSass(),
  ],
});

Storybook config:

import type { StorybookConfig } from 'storybook-react-rsbuild';

const config: StorybookConfig = {
  stories: [
    '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
  ],
  addons: [
    {
      name: '@storybook/addon-coverage',
      options: {
        istanbul: {
          include: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
        },
      },
    },
  ],
  framework: {
    name: 'storybook-react-rsbuild',
    options: {},
  },
  core: {
    builder: 'storybook-builder-rsbuild',
    disableTelemetry: true,
  },
};

Steps to reproduce the behavior

1. Run test-storybook -- --coverage command
2. Notice error
3. Run test-storybook command
4. Notice no error

Expected behavior

The storybook test command should work with coverage and proper code instrumentation no matter if webpack, vite, rsbuild, or another bundler is used.

Screenshots and/or logs

All tests failing with error below

    [Test runner] An error occurred when evaluating code coverage:
      The code in this story is not instrumented, which means the coverage setup is likely not correct.
      More info: https://github.com/storybookjs/test-runner#setting-up-code-coverage

Environment

• OS: MacOS 13.0.1 Ventura
• Node.js version: v20.12.2
• NPM version: 10.5.0
• Browser: N/A
• Browser version: N/A
• Device: N/A

[malinskibeniamin]

Fixed in rspack-contrib/storybook-rsbuild#127