Storybook code coverage in Turbo Monorepo.

[votemike]

Summary

I have created a new Turbo monorepo using the design-system example.
I then added testing to Storybook following these instructions. In the root of the repo, it is now possible to run pnpm run test-storybook (assuming storybook is running).
I then added test coverage as per this which I was hoping would show me uncovered lines/files in the packages/ui/src directory by running pnpm run test-storybook -- --coverage, but I can't get it to do so. I get a single line called "All files" which only shows zeros.

Is this possible? Is it a limitation of Turbo/Storybook in some way? Can this be done in monorepos? Is it just not documented how to do such a thing?
What am I doing wrong?

Thanks in advance.

Additional information

import { dirname, join, resolve } from "path";

function getAbsolutePath(value) {
  return dirname(require.resolve(join(value, "package.json")));
}

const config = {
  stories: ["../stories/*.stories.tsx", "../stories/**/*.stories.tsx"],
  addons: [
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-docs"),
    getAbsolutePath("@storybook/addon-interactions"),
    {
      name: getAbsolutePath('@storybook/addon-coverage'),
      options: {
        istanbul: {
          include: ['../../../packages/ui/src/**'],
          debug: true,
        },
      },
    },
  ],
  framework: {
    name: getAbsolutePath("@storybook/react-vite"),
    options: {},
  },

  core: {},

  async viteFinal(config, { configType }) {
    // customize the Vite config here
    return {
      ...config,
      define: { "process.env": {} },
      resolve: {
        alias: [
          {
            find: "ui",
            replacement: resolve(__dirname, "../../../packages/ui/"),
          },
        ],
      },
    };
  },

  docs: {
    autodocs: true,
  },
};

export default config;

Create a reproduction

https://github.com/votemike/design-system

[haileypun]

I'm struggling to do the same despite the file structures being defined in the config. Would be great to get some support on this!

[woodsboe]

Hi @votemike and @haileypun,
Could you try adding the UI package path to the stories property like this?

{
  stories: ["../stories/*.stories.tsx", "../stories/**/*.stories.tsx", "../../../packages/ui/**/*/*.stories.tsx"],
  ...
  }

[votemike]

I have tried that, and it also doesn't work.

[lenniii]

@votemike @haileypun did you resolve the issue by any chance?

[votemike]

No. Unfortunately not. We still have no coverage.

[ElBartoTn]

I used "vite-plugin-istanbul" with vite config to make it works , i used this vite.config.ts file

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
import istanbul from "vite-plugin-istanbul";

export default defineConfig({
  plugins: [
    react(),
    svgr(),
    istanbul({
      include: "**/src/**",
      exclude: ["node_modules", "test/"],
      extension: [".js", ".ts", ".tsx"],
      requireEnv: false,
    }),
  ],
  server: {
    watch: {
      ignored: ["**/coverage/**", "**/node_modules/**", "**/icons/**"],
    },
  },
  build: {
    cssCodeSplit: true,
  },
});

I removed the option from code-coverage addon

[nutrian]

@ElBartoTn is that vite config from your apps/storybook or packages/ui ?

[ElBartoTn]

Its storybook