Testing in React with Vitest

Course details

This course guides you through the process of setting up and testing web applications using Vitest integrated with the React Testing Library and other essential libraries. Learn how to set up a React app with Vite, install dependencies, and initialize your project, as you explore the basics of Vitest and how it can fit into your testing strategy with instructor Cyrus Ndirangu. Configure ESLint and Prettier to maintain code quality and style consistency, before you get started with your first unit test. Progressively, discover best practices for testing application state and hooks quickly and efficiently. By the end of the course, you’ll be ready to write tests that validate your application's functionality, including testing mock API requests and ensuring correct routing using the React Router. With practical examples and expert guidance throughout, this course shows you why testing is so crucial and how to use it to improve your development workflow.

Concepts

0. Introduction

01 - Welcome
02 - What you should know

1. Project Setup

03 - Setting up the project
04 - Running the app
05 - Introduction to Vitest
06 - Linting with ESLint

2. Unit and Snapshot Testing

07 - First unit test
08 - Testing for errors
09 - Snapshot testing - Part 1
10 - Snapshot testing - Part 2
11 - Putting it all together

3. Integrating React Testing Library

12 - Integrating Vitest with the React Testing Library
13 - Setting up the router
14 - Testing the app routes

4. Integration Testing Redux Toolkit

15 - Integrating Redux Toolkit
16 - Testing Redux Toolkit state

Conclusion

17 - What's next