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

PHP Symfony 4 API Platform + React.js Full Stack Masterclassudemy
Category: React.js, Symfony
Duration 19 hours 24 minutes 17 seconds
Course

Full-Stack React with GraphQL and Apollo Boostudemy
Category: React.js, Node.js, MongoDB, GraphQL
Duration 6 hours 54 minutes 31 seconds
Course

React Node FullStack - Ecommerce from Scratch to Deploymentudemy
Category: React.js, Node.js, MongoDB
Duration 16 hours 15 minutes 14 seconds
Course

Build a Youtube CloneCode With Antonio
Category: React.js, Next.js
Duration 23 hours 42 minutes 10 seconds
Course

React - The Complete Guide 2024udemyAcademind Pro
Category: React.js
Duration 64 hours 33 minutes 17 seconds
Course

Starting with React & Redux: Build modern apps (2nd edition)udemy
Category: React.js, Redux
Duration 30 hours 13 minutes 51 seconds
Course

Advanced React PatternsCosden Solutions
Category: React.js
Duration 12 hours 7 minutes 27 seconds
Course

The Ultimate React Course 2024: React, Redux & Moreudemy
Category: React.js, Redux
Duration 67 hours 14 minutes 41 seconds
Course

AWS AppSync & Amplify with React & GraphQL - Complete Guideudemy
Category: React.js, AWS, GraphQL
Duration 11 hours 11 minutes 36 seconds
Course