https://github.com/hedaukartik/bun-react-playwright-coverage

A starter template showcasing how to build a React app using Bun, instrument code for coverage with bun-plugin-istanbul, and run Playwright end-to-end tests. It generates detailed code coverage reports, providing a streamlined workflow for testing and analyzing application quality.
https://github.com/hedaukartik/bun-react-playwright-coverage

bun code-coverage e2e-testing nyc playwright react

Last synced: about 10 hours ago
JSON representation

A starter template showcasing how to build a React app using Bun, instrument code for coverage with bun-plugin-istanbul, and run Playwright end-to-end tests. It generates detailed code coverage reports, providing a streamlined workflow for testing and analyzing application quality.

• Host: GitHub
• URL: https://github.com/hedaukartik/bun-react-playwright-coverage
• Owner: hedaukartik
• License: mit
• Created: 2025-01-23T18:12:22.000Z (1 day ago)
• Default Branch: master
• Last Pushed: 2025-01-23T18:50:28.000Z (1 day ago)
• Last Synced: 2025-01-23T19:33:04.400Z (1 day ago)
• Topics: bun, code-coverage, e2e-testing, nyc, playwright, react
• Language: TypeScript
• Homepage:
• Size: 57.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        








  

  

  



Bun CSR React App Playwright Coverage




This repository demonstrates building a React app using Bun, with code coverage generated using the bun-plugin-istanbul. The app is served using bun.serve, and tests are executed with Playwright. Post-test execution, a script generates code coverage data.

`bun` `react` `csr` `typescript` `react-router-dom-v6` `playwright` `nyc` `bun-plugin-istanbul` `code-coverage`



## Features

- *React App with Bun:* Using Bun as the runtime and bundler for fast builds and server starts.

- *Code Coverage with bun-plugin-istanbul:* Instrumentation for code coverage during tests.

- *Testing with Playwright:* End-to-end testing with Playwright.

- *Coverage Report Generation:* Script to generate a complete coverage report.

## You need `bun` installed in your system for this template:

```bash

curl -fsSL https://bun.sh/install | bash # for macOS, Linux, and WSL

```

### To use this template to start a new react client-side rendering project from scratch:

```bash

bun create https://github.com/hedaukartik/bun-react-playwright-coverage name-of-your-project

```

### To install dependencies:

```bash

bun install

```

### To run app:

```bash

bun dev

```

### To run playwright test:

```bash

bun run test:e2e

```

### To generate code coverage after running playwright test:

```bash

bun run test:e2e:generate:coverage

```

### To view the html code coverage report after generating:

```bash

bun run test:e2e:generate:show-report

```

![image](https://github.com/user-attachments/assets/6b592465-1532-4d7c-89ae-35f2c35edcff)

## Contributing

Contributions are welcome! If you have ideas for improvements or want to report issues, feel free to open an issue or a pull request.