https://github.com/zakimohammed/react-vitest
Unit testing in React using Vitest
https://github.com/zakimohammed/react-vitest
react react-unit-testing react-vitest vitest
Last synced: 3 months ago
JSON representation
Unit testing in React using Vitest
- Host: GitHub
- URL: https://github.com/zakimohammed/react-vitest
- Owner: ZakiMohammed
- Created: 2024-03-17T02:01:09.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-31T19:15:50.000Z (over 2 years ago)
- Last Synced: 2025-03-03T19:06:33.606Z (over 1 year ago)
- Topics: react, react-unit-testing, react-vitest, vitest
- Language: JavaScript
- Homepage:
- Size: 90.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Vitest
Unit testing in React using Vitest.
## Run App
Below command will run the project:
```
npm run dev
```
## Test App
Below command will test the project:
```
npm test
npm run test:ui
npm run test:watch
npm run test:coverage
```
## Initial Vitest Setup
Install Vitest in the application as dev dependency.
```
npm i -D vitest
```
Create `sum.js` file to test using `vitest`:
```
const sum = (a, b) => a + b;
export default sum;
```
Create `sum.test.js` file to write test cases for the same:
```
import { expect, test } from 'vitest'
import sum from './Sum'
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
```
Install the `jsdom` package:
```
npm i -D jsdom
```
Add `jsdom` to `vite.config`:
```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
test: {
environment: 'jsdom', // 👈
}
})
```
Install React Testing Library:
```
npm i -D @testing-library/jest-dom
npm i -D @testing-library/react
npm i -D @testing-library/user-event
```
Create `App.test.js` file to write test cases for the App.jsx:
```
import { expect, test } from 'vitest'
import App from './App'
import { render, screen } from '@testing-library/react'
test('renders', () => {
render()
expect(screen.getByText('Hello Vitest')).toBeInTheDocument()
})
```
Testing Cases:
- Test With Mock Data
- Test With Mock Data Covering All Branches
- Test User Interactions
- Test State Updates
- Test API Calls