Jest, Vitest & Testing Library

What you'll learn

• Choose between Jest and Vitest and configure either one for a TypeScript frontend project.
• Write clear, isolated tests with the arrange-act-assert shape and the right matchers.
• Test asynchronous code, timers, dates and randomness deterministically.
• Mock functions, modules and network requests (with MSW) without coupling tests to implementation details.
• Test React components the way users use them with Testing Library queries and user-event.
• Keep a test suite fast, trustworthy and useful in CI with coverage, debugging and sharding.

Syllabus

Testing Foundations

1. Why Automated Tests and Which Kinds
2. Jest Versus Vitest
3. Setting Up Jest or Vitest

Writing Good Tests

1. describe, it and Arrange-Act-Assert
2. Choosing the Right Matcher
3. Setup, Teardown and Test Isolation

Async Code and Time

1. Testing Promises and async/await
2. Fake Timers
3. Dates and Randomness

Mocks, Spies and the Network

1. Mock Functions and Spies
2. Module Mocking and Hoisting
3. Mocking the Network with MSW

Testing Library Principles

1. Test Behaviour, Not Implementation
2. Query Priority
3. get, query and find Variants

Testing React Components

1. Rendering Components
2. User Interactions with user-event
3. Async UI, Forms and Hooks

Snapshots, Providers and Coverage

1. Snapshot Testing and When to Avoid It
2. Context, Providers and Routing
3. Coverage and Its Limits

Test Suites in Practice and CI

1. Organising Tests and Test Data Factories
2. Flaky Tests and Debugging
3. Running Tests in CI
4. A Frontend Testing Checklist