Testing Framework
This project uses Vitest as the testing framework. Vitest is a fast, modern test runner designed for Vite-based projects and works seamlessly with Angular 21.Running Tests
Run All Tests
Execute all unit tests:Watch Mode
Vitest runs in watch mode by default, automatically re-running tests when files change.Test Configuration
TypeScript Configuration
The project includes a dedicated TypeScript configuration for tests (tsconfig.spec.json):
Test File Location
Test files should be placed alongside the code they test with the.spec.ts extension:
Writing Tests
Component Tests
Example of a basic Angular component test:Service Tests
Example of testing an Angular service:Test Dependencies
The project includes these testing dependencies:- vitest: ^4.0.8 - Modern test runner
- jsdom: ^27.1.0 - DOM implementation for testing
- @angular/build: Test utilities built into Angular CLI
Global Test Types
Vitest globals are available in all test files:describe()- Group related testsit()/test()- Define individual testsexpect()- Make assertionsbeforeEach()/afterEach()- Setup and teardownbeforeAll()/afterAll()- One-time setup and teardown
Best Practices
- Test File Naming: Use
.spec.tssuffix for test files - Test Organization: Keep tests close to the code they test
- Test Isolation: Each test should be independent
- Descriptive Names: Use clear, descriptive test names
- Arrange-Act-Assert: Structure tests with setup, execution, and assertion
Coverage
Vitest can generate code coverage reports. The test configuration includes coverage settings through the Angular build system.Debugging Tests
To debug tests in VS Code:- Set breakpoints in your test files
- Use the built-in Vitest debugging capabilities
- Run tests with the debugger attached
Next Steps
- Learn about the Build Process
- Explore SSR Configuration
- Review Code Style Guidelines