Skip to main content

Testing

Kuviq uses a comprehensive testing strategy with multiple layers to catch bugs before deployment.

Current Status: 5,940 tests passing, 122 skipped (6,062 total) as of January 2026.

Test Types​

Unit Tests​

Test individual functions and components in isolation.

npm run test:unit
npm run test:unit:watch  # Watch mode

Location: src/__tests__/components/, src/__tests__/hooks/, src/__tests__/utils/

Integration Tests​

Test workflows and interactions between multiple components.

npm run test:integration
npm run test:integration:watch  # Watch mode

Location: src/__tests__/integration/

API Tests (MSW)​

Test API interactions using Mock Service Worker.

npm run test:api
npm run test:api:watch  # Watch mode

Location: src/__tests__/api/

E2E Tests (Playwright)​

Real browser tests using Playwright.

npm run test:playwright          # Headless
npm run test:playwright:headed   # With browser UI
npm run test:playwright:ui       # Interactive UI mode
npm run test:playwright:debug    # Debug mode

Location: e2e/

Firebase Emulator Tests​

Tests that run against the Firebase Emulator Suite.

# Start emulators first
npm run emulators

# In another terminal
npm run test:emulator

Test Configuration​

Each test type has its own Vitest configuration:

  • vitest.unit.config.ts - Unit tests
  • vitest.integration.config.ts - Integration tests
  • vitest.api.config.ts - API tests
  • vitest.emulator.config.ts - Emulator tests
  • playwright.config.ts - Playwright E2E tests

Writing Tests​

Test Standards​

All tests should use renderWithTheme from src/utils/test-utils.tsx instead of importing render directly from @testing-library/react. This ensures consistent theming across tests.

// ✅ Correct
import { renderWithTheme } from '../../utils/test-utils'

// ❌ Incorrect
import { render } from '@testing-library/react'

Mocking Firebase​

Firebase services are automatically mocked in tests. See src/__mocks__/firebase.ts for the mock implementations.

Mocking Contexts​

Context providers are mocked in src/__mocks__/contexts/. Use these when testing components that depend on context.

Running All Tests​

# Run all CI tests (unit + integration)
npm run test:ci

# Run with coverage
npm run test:coverage

Debugging Tests​

Vitest​

# Run specific test file
npm run test:unit -- src/__tests__/utils/myTest.test.ts

# Run tests matching pattern
npm run test:unit -- -t "should calculate correctly"

Playwright​

# Debug mode with inspector
npm run test:playwright:debug

# Generate trace on failure
npx playwright test --trace on