https://github.com/penx/storybook-code-coverage

Combining Storybook, Cypress and Jest Code Coverage
https://github.com/penx/storybook-code-coverage

chromatic code-coverage create-react-app cypress cypress-code-coverage-example cypress-example cypress-io jest jest-coverage react react-example react-testing storybook storybook-chromatic storyshots visual-regression visual-regression-testing

Last synced: 2 months ago
JSON representation

Combining Storybook, Cypress and Jest Code Coverage

• Host: GitHub
• URL: https://github.com/penx/storybook-code-coverage
• Owner: penx
• Created: 2020-04-16T10:28:04.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T19:30:39.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T16:12:31.060Z (3 months ago)
• Topics: chromatic, code-coverage, create-react-app, cypress, cypress-code-coverage-example, cypress-example, cypress-io, jest, jest-coverage, react, react-example, react-testing, storybook, storybook-chromatic, storyshots, visual-regression, visual-regression-testing
• Language: JavaScript
• Homepage: https://dev.to/penx/combining-storybook-cypress-and-jest-code-coverage-4pa5
• Size: 2.26 MB
• Stars: 31
• Watchers: 2
• Forks: 15
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Combining Storybook, Cypress and Jest Code Coverage

Please refer to [this blog post for more detailed information](https://dev.to/penx/combining-storybook-cypress-and-jest-code-coverage-4pa5).

This project shows how to collect code coverage from Storybook (e.g. when using [Chromatic](https://www.chromaticqa.com) for Visual Regression tests) and how to create a combined code coverage report for 3 types of test:

- Visual regression tests ([Storybook](https://storybook.js.org)/[Chromatic](https://www.chromaticqa.com))

- Unit tests ([Jest](http://jestjs.io))

- Integration tests ([Cypress](http://cypress.io))

You can view a report for each type of test, or view the coverage of all tests together.

To try out this project this locally:

```sh

git clone [email protected]:penx/storybook-code-coverage.git

cd storybook-code-coverage

yarn

yarn coverage

open coverage/merged/lcov-report/index.html

```

## Combining coverage

You can also [merge reports with codecov](https://docs.codecov.io/docs/merging-reports).

## Known issues

- cypress-specific nyc settings have to go in to generic files (e.g. `package.json` or `.nycrc`)

- There's a bug with [email protected] that prevents this from working, so for now you have to roll back to 3.4.0 [facebook/create-react-app#8689](https://github.com/facebook/create-react-app/issues/8689).