React Component Testing with Vitest

1h 38m 34s
English
Paid
The closer your tests mimic real-world application usage, the more confidence they provide. However, for a long time, web developers had to test interfaces in artificial environments like JSDOM, which required a lot of configurations and workarounds. It's time to change the approach: now you can test React components directly in the browser using Vitest Browser Mode.
Read more about the course

In this practical course, you will learn to:

  • Set up and use Vitest Browser Mode for component testing in a real browser;
  • Understand the limitations of JSDOM and the reasons for transitioning to browser testing;
  • Migrate existing tests from JSDOM to browser mode;
  • Configure Playwright for browser automation testing of components;
  • Organize the test environment and combine unit and component tests in one project.

You will master best practices in:

  • Locating elements as real users do;
  • Implementing user events;
  • Mocking APIs using Mock Service Worker;
  • Reliable verification of the presence or absence of elements;
  • Testing page transitions.

Additionally, you will learn effective methods for debugging tests: inspecting the DOM state, using the debugger, conditional breakpoints, and other tools that will make dealing with failing tests easier and clearer.

Who this course is for

This course is designed for all React developers who wish to write reliable and useful tests for their components, regardless of their level of experience in testing. You will discover new tools, APIs, and approaches that will help increase the value of your test suite.

Watch Online React Component Testing with Vitest

Join premium to watch
Go to premium
# Title Duration
1 Introduction to React Component Testing with Vitest Browser Mode 01:50
2 Sunsetting JSDOM 01:32
3 Break JSDOM - Problem 00:48
4 Break JSDOM - Solution 03:32
5 Recap Of Sunsetting JSDOM 00:27
6 Vitest Browser Mode 04:00
7 Installation and Setup - Problem 02:50
8 Installation and Setup - Solution 00:13
9 Migrate The Test - Problem 00:35
10 Migrate The Test - Solution 03:12
11 Playwright - Problem 01:16
12 Playwright - Solution 02:58
13 Shared Assets - Problem 00:41
14 Shared Assets - Solution 04:15
15 Multiple Workspaces - Problem 00:51
16 Multiple Workspaces - Solution 07:20
17 Outro Vitest Browser Mode 00:42
18 Best Practices 01:45
19 Queries - Problem 00:44
20 Queries - Solution 05:42
21 User Events - Problem 01:01
22 User Events - Solution 04:09
23 Network Mocking - Problem 12:21
24 Network Mocking - Solution 05:42
25 Element Presence - Problem 01:21
26 Element Presence - Solution 04:14
27 Page Navigation - Problem 01:15
28 Page Navigation - Solution 04:15
29 Recap Of Best Practices 00:27
30 Debugging Tests 00:56
31 DOM Snapshots - Problem 01:26
32 DOM Snapshots - Solution 02:24
33 Debugger - Problem 03:58
34 Debugger - Solution 01:35
35 Breakpoints - Problem 02:00
36 Breakpoints - Solution 04:59
37 Recap Of Debugging 00:38
38 React Component Testing with Vitest Outro 00:40

Similar courses to React Component Testing with Vitest

MERN Stack Web Development with Ultimate Authentication

MERN Stack Web Development with Ultimate Authenticationudemy

Category: React.js, Node.js, MongoDB
Duration 9 hours 24 minutes 59 seconds
Next.js & React with ChatGPT - Development Guide (2023)

Next.js & React with ChatGPT - Development Guide (2023)udemy

Category: React.js, Next.js, ChatGPT
Duration 7 hours 6 minutes 49 seconds
Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL)

Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL)udemyzerotomastery.io

Category: React.js, Redux
Duration 39 hours 48 minutes
Zero to Full Stack Hero

Zero to Full Stack Heropapareact.com

Category: JavaScript, React.js, Others, CSS, Node.js, GraphQL, Firebase
Duration 101 hours 29 minutes 59 seconds
PHP Symfony 4 API Platform + React.js Full Stack Masterclass

PHP Symfony 4 API Platform + React.js Full Stack Masterclassudemy

Category: React.js, Symfony
Duration 19 hours 24 minutes 17 seconds
React for Beginners

React for Beginnerscodewithmosh (Mosh Hamedani)

Category: React.js
Duration 7 hours 58 minutes 3 seconds
React Chrome Extension boilerplate | Shipped

React Chrome Extension boilerplate | ShippedLuca Restagno (shipped.club)

Category: React.js, Assemblies, ready-made solutions for development
Duration
Python/Django + React QR Digital Menu Builder

Python/Django + React QR Digital Menu BuilderPythonYoga

Category: React.js, Python
Duration 10 hours 49 minutes 22 seconds