Vitest

Vitest

Presentation

Vitest is a test framework, powered by Vite. It is a modern alternative to Jest, Chai, ...

For our project, it offers

• Performance: Uses Vite's dev server logic to run fast
• Compatibility: It shares a common configuration with Vite (vite.config.ts), reducing setup complexity for projects already using Vite (like our React frontend).

Core testing concepts

TDD (Test Driven Development): It is a methodology where we write the test before the code.

• 🔴 Write a failing test.
• 🟢 Write the minimal code to pass the test.
• 🟢 Refactor the code while keeping the test green.

AAA Pattern: It is the standard structure for a unit test.

• Arrange: Set up the necessary objects, variables, and mocks.
• Act: Execute the function or component under test.
• Assert: Verify the result matches the expectation.

Choosing Test Cases: Focus on:

• Happy Path: Does it work with standard input?
• Edge Cases: What happens with empty containers, null values, or extreme numbers?
• Error Handling: Does it throw/catch errors correctly?

Setup

npm install -D vitest @vitest/coverage-v8

Note

We can try to have a single installation at project root for common cases. Yet some modules require additional dependencies

Configuration

• environment : jsdom for frontend, otherwise node
• coverage requires a specific config for CI job

Basic commands : vitest --run and vitest run --coverage

Basic syntax

Example

// Groups tests suite (ex : tests for an API path)
describe('GET /resource/:id', () => {

// Single test (can also use `test`) name should be descriptive
it('should return 500 in case of server error', () => {

// assertions with `expect`
expect(response.statusCode).toBe(200);

Warning

Till returned values are not defined in a stable way, assertions should focus on the basics (http status) Later on we could enrich tests with assertions on returned content, called functions, etc

Mocking

When doing unit test we should mock external dependencies (ex : functions from other layers, returns from DB)

Example

// mocking the service
vi.mock('../src/services/users-service.js', () => ({
  findUser: vi.fn(),
}));

// specific return value for this test
vi.mocked(service.findUser).mockResolvedValue({ id: 1, name: 'Alice' });

Note

Tests should not reuse resources from codebase and should have their own mocks. They can be shared among tests though (ie. mock factories in their own files, possibly using libs such as Faker)

Unit testing backend Fastify services

• use Fastify .inject()
• pass required headers

Unit testing React components

• Requires @testing-library/react providing render, screen, fireEvent
• make assertions with toHaveTextContent(), ...

Launching

Filtering test matching a filename npx vitest friends.controllers

Coverage

• vitest run --coverage

Browser mode

• Requires @vitest/ui

• see console.log outputs in real time

Do's & Don'ts

✅ Do	❌ Don't
Isolate tests: Each test should run independently. Reset mocks in beforeEach.	Couple tests: Don't rely on the state left by a previous test (e.g., DB records).
Test behavior: Focus on what the component does, not how it's implemented.	Test implementation details: Avoid testing private methods or specific CSS class names unless necessary.
Use descriptive names: it('should return 400 if email is missing')	Use vague names: it('should work').
Mock external I/O: Mock databases and fetch requests to keep tests fast and deterministic.	Make real API calls: Never hit real production APIs in unit tests.
Use describe blocks: Group related tests for better readability in reports.	Write flat files: Don't put all tests in the root of the file without structure.

---

Resources

Type	Resource	Notes
📄	Vitest Official Docs	Main reference
📄	React Testing Library	Standard for React component testing
📄	Fastify Testing	Guide on .inject() and mocking