Testing in React with Vitest

Testing in React with Vitest

1h 6mIntermediate2024-09-13

Authors

Cyrus Ndirangu

Cyrus Ndirangu

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.

Skills covered

React.jsSoftware TestingMetaFront-End Web DevelopmentWeb DevelopmentSoftware DevelopmentOne-Off

Concepts

Introduction

  • Welcome
  • What you should know

Project Setup

  • Setting up the project
  • Running the app
  • Introduction to Vitest
  • Linting with ESLint

Unit and Snapshot Testing

  • First unit test
  • Testing for errors
  • Snapshot testing - Part 1
  • Snapshot testing - Part 2
  • Putting it all together

Integrating React Testing Library

  • Integrating Vitest with the React Testing Library
  • Setting up the router
  • Testing the app routes

Integration Testing Redux Toolkit

  • Integrating Redux Toolkit
  • Testing Redux Toolkit state

Conclusion

  • What's next
40,000 Toman