yannbf / storybook-coverage-recipes

Storybook Coverage Recipes

This repository serves as an example of projects using the Storybook test runner (@storybook/test-runner) to generate code coverage for the components that render in Storybook, as well as the necessary steps to setup the coverage correctly, which may vary between projects of different frameworks and builders (Webpack, Vite).

Webpack

• Angular
• React
• Create React App + TypeScript
• Lit 2
• HTML
• Preact
• Vue
• Vue 3

Vite

• React
• Svelte
• Vue 3
• Angular

storybook-coverage-recipes's Issues

Example of nextjs in a (turbo) monorepo

i got the wrong tips like this when i setup coverage config; my project is turbo monorepo used in @storybook/nextjs framework

Lines of coverage are not specified correctly for angular

If you open your angular example and run coverage in it, you can see that all the lines are shifted, it feels like the lines in coverage-storybook.json point to the built ‘.js’ files and not to the source ‘.ts’ file. Perhaps there is some kind of source-map problem here?

Example of angular vite in a (nx) monorepo

Any chance of coming up with an example for this?
I've tried adapting it but had no real succes beyond Storybook lanching without any stories.

In our case we have different apps/libs that all have their own Storybook.
And one mayor Storybook that bundles all the files together.

Would love to get the speed and coverage of Vite!