Frontend Unit & Integration Testing
Relevant source files
The following files were used as context for generating this wiki page:
- assets/vitest.config.ts
- assets/package.json
- assets/src/relay/tests/fetch-graphql.test.ts
- assets/src/routes/compare/tests/compare.route.test.tsx
- assets/src/routes/catalog/tests/browse.route.test.tsx
- assets/src/routes/products/tests/detail.route.test.tsx
- assets/src/tests/entry.server.error-handling.test.tsx
- assets/tests/e2e/auth.spec.ts
The frontend testing architecture of the Product Compare project is built to ensure the reliability of React components, route loaders, and the Relay-based GraphQL network layer. It employs a multi-layered strategy involving unit tests for logic, integration tests for routing and data fetching, and end-to-end (E2E) testing for critical user flows like authentication.
The system relies on Vitest for unit and integration testing within a JSDOM environment, complemented by React Testing Library for component verification. E2E testing is handled via Playwright, ensuring that the full stack—from the UI to the GraphQL API—functions correctly in a browser environment.
Sources: assets/package.json, assets/vitest.config.ts
Core Testing Stack
The project utilizes a modern JavaScript testing stack managed via Bun. The configuration is centralized in the assets directory.
Key Tools and Frameworks
| Tool | Purpose | Configuration File |
|---|---|---|
| Vitest | Fast unit and integration testing framework | vitest.config.ts |
| Playwright | End-to-end browser testing | playwright.config.ts |
| JSDOM | Browser environment simulation for Vitest | vitest.config.ts |
| React Testing Library | UI component testing and DOM assertions | N/A (Dev dependency) |
Sources: assets/package.json:26-38, assets/vitest.config.ts:8-12
Testing Architecture Flow
The following diagram illustrates how tests interact with different layers of the frontend application, specifically how route loaders and components are verified using mocked GraphQL responses.
This diagram shows the relationship between test types and the application layers they target.
Sources: assets/src/routes/compare/tests/compare.route.test.tsx:8-25, assets/tests/e2e/auth.spec.ts:8-53
Unit and Integration Testing
GraphQL Network Layer Testing
The network layer tests verify that fetchGraphQL correctly handles different environments (Browser vs SSR) and authentication states. This includes ensuring that credentials (cookies) are included in requests and that trusted origins are derived during Server-Side Rendering (SSR).
- Endpoint Resolution: Tests ensure that the local Phoenix endpoint defaults to
http://localhost:4000/api/graphqlduring development. - SSR Context: Verification that SSR cookies and request headers are forwarded to the GraphQL request.
Sources: assets/src/relay/tests/fetch-graphql.test.ts:3-85
Route Loader Verification
Integration tests for routes (e.g., /products, /compare) focus on the logic within React Router loaders. These tests mock the fetchGraphQL utility to simulate various API responses, including:
- Successful Loads: Ensuring data is correctly parsed into the component's expected format.
- Error States: Verifying that the loader returns "error" or "not_found" statuses when the API fails or returns null data.
- Boundary Conditions: Checking limits, such as the 3-product comparison limit.
Sources: assets/src/routes/compare/tests/compare.route.test.tsx:44-165, assets/src/routes/catalog/tests/browse.route.test.tsx:30-104
Component Testing
UI components are tested by mocking useLoaderData from React Router. This allows developers to test how components render different states (Ready, Loading, Error, Empty) without executing actual data fetching.
This sequence shows the flow of mocking route data to test UI component rendering.
Sources: assets/src/routes/products/tests/detail.route.test.tsx:327-360, assets/src/routes/catalog/tests/browse.route.test.tsx:112-140
End-to-End (E2E) Testing
E2E tests use Playwright to validate complete user journeys. A critical part of the E2E infrastructure is the GraphQL mocking utility, which intercepts POST requests to **/api/graphql.
Authentication Flow Verification
The test suite covers the entire authentication lifecycle:
- Login: Successful redirection to home after session mutation.
- Registration: Handling of new account creation.
- Password Recovery: Testing "Forgot Password" and "Reset Password" (including token consumption from URL parameters).
- Email Verification: Confirming tokens in the URL trigger the correct success state.
Sources: assets/tests/e2e/auth.spec.ts:55-195
Server-Side Rendering (SSR) Error Handling
Specific tests are dedicated to the server entry point (entry.server.tsx) to ensure that:
- SSR context is correctly passed to the Relay environment.
- Redirect responses from the static handler are returned unchanged.
- Recoverable render errors do not crash the entire response.
- Invalid URL resolutions are logged and handled gracefully.
Sources: assets/src/tests/entry.server.error-handling.test.tsx:50-200
Testing Commands
The project defines standard scripts in package.json for executing tests.
| Command | Action |
|---|---|
bun run test | Runs all Vitest suites |
bun run test:unit | Alias for running Vitest suites |
bun run test:e2e | Runs Playwright browser tests |
bun run check | Runs both type-checking and unit tests |
Sources: assets/package.json:7-14
The frontend testing strategy ensures that every layer, from network requests to UI components and server-side rendering, is validated against both successful and failure scenarios. By utilizing extensive mocking of the GraphQL API and routing data, the suite provides high confidence in the application's stability across different execution environments.