119 lines
2.4 KiB
Markdown
119 lines
2.4 KiB
Markdown
# Testing Guide
|
|
|
|
## Overview
|
|
This project uses **Vitest** and **React Testing Library** for testing.
|
|
|
|
## Running Tests
|
|
|
|
```bash
|
|
# Run tests in watch mode
|
|
npm run test
|
|
|
|
# Run tests once
|
|
npm run test:run
|
|
|
|
# Run tests with UI
|
|
npm run test:ui
|
|
|
|
# Run tests with coverage
|
|
npm run test:coverage
|
|
```
|
|
|
|
## Test Structure
|
|
|
|
```
|
|
src/
|
|
├── components/
|
|
│ ├── __tests__/
|
|
│ │ └── ProtectedRoute.test.tsx
|
|
│ └── ProtectedRoute.tsx
|
|
├── lib/
|
|
│ ├── __tests__/
|
|
│ │ └── utils.test.ts
|
|
│ └── utils.ts
|
|
├── pages/
|
|
│ └── login/
|
|
│ ├── __tests__/
|
|
│ │ └── index.test.tsx
|
|
│ └── index.tsx
|
|
└── test/
|
|
├── setup.ts # Test setup
|
|
└── test-utils.tsx # Custom render with providers
|
|
```
|
|
|
|
## Writing Tests
|
|
|
|
### Component Tests
|
|
|
|
```typescript
|
|
import { describe, it, expect } from 'vitest'
|
|
import { render, screen } from '@/test/test-utils'
|
|
import MyComponent from '../MyComponent'
|
|
|
|
describe('MyComponent', () => {
|
|
it('should render correctly', () => {
|
|
render(<MyComponent />)
|
|
expect(screen.getByText('Hello')).toBeInTheDocument()
|
|
})
|
|
})
|
|
```
|
|
|
|
### Testing with User Interactions
|
|
|
|
```typescript
|
|
import userEvent from '@testing-library/user-event'
|
|
|
|
it('should handle click', async () => {
|
|
const user = userEvent.setup()
|
|
render(<Button>Click me</Button>)
|
|
|
|
await user.click(screen.getByRole('button'))
|
|
expect(screen.getByText('Clicked')).toBeInTheDocument()
|
|
})
|
|
```
|
|
|
|
### Testing API Calls
|
|
|
|
```typescript
|
|
import { vi } from 'vitest'
|
|
import { adminApiHelpers } from '@/lib/api-client'
|
|
|
|
vi.mock('@/lib/api-client', () => ({
|
|
adminApiHelpers: {
|
|
getUsers: vi.fn(),
|
|
},
|
|
}))
|
|
|
|
it('should fetch users', async () => {
|
|
const mockGetUsers = vi.mocked(adminApiHelpers.getUsers)
|
|
mockGetUsers.mockResolvedValue({ data: [] })
|
|
|
|
// Test component that calls getUsers
|
|
})
|
|
```
|
|
|
|
## Coverage Goals
|
|
|
|
- **Statements**: 80%+
|
|
- **Branches**: 75%+
|
|
- **Functions**: 80%+
|
|
- **Lines**: 80%+
|
|
|
|
## Best Practices
|
|
|
|
1. **Test behavior, not implementation**
|
|
2. **Use semantic queries** (getByRole, getByLabelText)
|
|
3. **Avoid testing implementation details**
|
|
4. **Mock external dependencies**
|
|
5. **Keep tests simple and focused**
|
|
6. **Use descriptive test names**
|
|
|
|
## CI Integration
|
|
|
|
Tests run automatically on:
|
|
- Every push to main/develop
|
|
- Every pull request
|
|
- Before deployment
|
|
|
|
See `.github/workflows/ci.yml` for details.
|