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

[malinskibeniamin]

Cross-posting storybookjs/addon-coverage#48

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

[fi3ework]

I've not tried the reproduce steps yet, but by reading the addon's code https://github.com/storybookjs/addon-coverage/blob/main/src/preset.ts#L47. I think it could not work with storybook-rsbuild as it only apply for webpack and vite for now, which lacks support for Rsbuild(Rspack).

I think we need a general way to make storybook-build-builder could apply the webpack export easily someway. By achieving that, we could also resolve #92.

[fi3ework]

I found a way to make storybook-rsbuild to compatible with arbitrary webpack supported addons. Will implement this in days.