Skip to content

Frontend Testing Strategy

Testing Pyramid

graph TD
    A[Testing Strategy] --> B[Unit Tests]
    A --> C[Component Tests]
    A --> D[E2E Tests]

    B --> B1[Vitest]
    C --> C1[Playwright Component Tests]
    D --> D1[Playwright E2E Tests]

Testing Tools

  • Unit Testing: Vitest
  • Component Testing: Playwright Component Tests
  • End-to-End Testing: Playwright

Testing Layers

  • Unit Tests: Validate individual functions
  • Component Tests: Ensure UI component integrity
  • E2E Tests: Simulate real-world user journeys

Dependencies

# Install testing dependencies
bun add -D vitest 
bun add -D @testing-library/react 
bun add -D @testing-library/user-event
bun add -D @types/vitest 
bun add -D jsdom 
bun add -D c8
bun add -D @playwright/test 
bun add -D @playwright/experimental-ct-react
bunx playwright install

Last Updated: 2024-12-22