Unit Testing Strategy
Relevant source files
The following files were used as context for generating this wiki page:
The unit testing strategy for the wouter-vue project is a multi-layered approach designed to ensure the stability of a high-performance, minimalist Vue 3 router. It encompasses core library unit tests, end-to-end (E2E) browser testing, and performance benchmarking. The strategy focuses on validating route matching logic, component reactivity, and the integrity of the routing API across different environments including Server-Side Rendering (SSR).
Sources: package.json:20-25, README.md:38-48
Core Testing Infrastructure
The project utilizes several testing frameworks to validate different aspects of the codebase. The primary engine for unit testing is Vitest, while browser-based validation is handled by Playwright.
Test Tooling and Configuration
The project defines specific scripts for different testing scopes:
- Unit Testing: Executed via
vitest, focusing on the core logic and Composition API hooks. - Browser Testing: Uses Playwright to simulate user interactions within example applications.
- Static Analysis: Employs Biome for linting and formatting, and TypeScript for type checking.
| Tool | Purpose | Configuration/Target |
|---|---|---|
| Vitest | Core Unit Tests | vitest.config.ts, test/ directory |
| Playwright | E2E Browser Testing | examples/example/test/ |
| Biome | Linting & Formatting | biome lint . |
| TSC | Type Safety | tsc --noEmit |
Sources: package.json:18-28, examples/example/package.json:13-14
Component and Route Validation
Testing focuses heavily on the visual and functional consistency of routes. This includes verifying that components render correctly based on the current URL and that navigation triggers the expected state changes.
Content Integrity Testing
Browser tests ensure that specific data attributes (e.g., data-testid) and content exist on navigated pages. This includes:
- Home Page: Validating the presence of feature lists and navigation links.
- About Page: Checking the rendering of URL information, query parameters, and hash fragments.
- Dynamic Routes: Verifying user detail pages correctly extract and display parameters like
:id.
The diagram above represents the typical flow of an E2E test case for a specific route.
Sources: examples/example/test/pages.spec.js:4-60
Parameter and Query Handling
Tests explicitly validate the router's ability to parse and react to URL changes. For instance, tests navigate to /about?page=2&sort=asc#section-1 and verify that the component correctly reflects these values in the UI.
Sources: examples/example/test/pages.spec.js:46-55
Error Handling and Edge Cases
The testing strategy includes negative testing to ensure the router handles non-existent paths gracefully.
- 404 Not Found: Tests navigate to non-existent URLs and verify that a "Not Found" page is rendered with appropriate status indicators (e.g., "404" text).
- Missing Data: Validation of "User Detail" pages when an invalid ID is provided, ensuring "User not found" messages appear.
The sequence diagram shows the internal handling of a 404 error state as validated in the test suite.
Sources: examples/example/test/pages.spec.js:127-142, examples/example/test/pages.spec.js:120-125
Performance Benchmarking
Given that wouter-vue is marketed as a high-performance alternative to vue-router, the project includes dedicated benchmarking infrastructure.
- Throughput Testing: Conducted using Artillery.io to measure requests per second (req/s).
- Comparative Analysis: Performance is measured against
vue-routerusing a standardized 200-route example. - Metric Validation: Tests track median latency, p95/p99 latency, and total request volume over defined durations.
| Metric | Testing Target |
|---|---|
| Throughput | Requests processed per second |
| Latency | Response time distribution (p50, p95, p99) |
| Error Rate | Stability under high virtual user load |
Sources: README.md:48-61, examples/README.md:25-30
Integration with Development Workflow
The testing strategy is integrated into the build process through standard NPM scripts in the workspace.
- Pre-check: Biome lints the code to catch style issues.
- Unit Tests: Vitest runs core logic checks.
- Browser Tests: A shell script (
test-all.sh) manages the build, SSR server start, and Playwright execution for the example application.
Sources: package.json:18-28, examples/example/package.json:15, examples/README.md:30
The wouter-vue testing strategy provides a comprehensive verification of the router's minimalist architecture. By combining high-speed unit tests with real-world browser simulation and rigorous performance benchmarking, the project ensures its core promises of speed and reliability are met across different Vue 3 implementation scenarios.