compatibility with @storybook/addon-coverage

[njzydark]

When using the @storybook/addon-coverage plugin to obtain code coverage, the output does not include any test files. According to the plugin documentation, it appears to support Webpack or Vite.

[fi3ework]

Minimal reproduction or any clue please?

[njzydark]

Minimal reproduction or any clue please?

https://github.com/njzydark/storybook-rsbuild-demo

[fi3ework]

I'll check it later today.

[fi3ework]

1. According to https://storybook.rsbuild.dev/guide/options/builder-options.html#using-customized-addon, you need to add it to options.webpackAddons, and use with getAbsolutePath for resolving the addon correct path.

import type { StorybookConfig } from 'storybook-react-rsbuild';
import { dirname, join } from 'node:path';

+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
-    // '@storybook/addon-coverage',
  ],
+  webpackAddons: [
+    {
+      name: getAbsolutePath('@storybook/addon-coverage'),
+      options: {
+        istanbul: {
+          include: ['src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+          exclude: [],
+        },
+      },
+    },
+  ],
  framework: {
    name: 'storybook-react-rsbuild',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    check: true,
  },
};

export default config;

2. Correct the script

- "test-storybook-coverage": "test-storybook -- --coverage"
+ "test-storybook-coverage": "test-storybook --coverage"

3. There you go