React Component Testing with Vitest
1h 38m 34s
English
Paid
Course description
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
Watch Online React Component Testing with Vitest
0:00
/ #1: Introduction to React Component Testing with Vitest Browser Mode
All Course Lessons (38)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction to React Component Testing with Vitest Browser Mode Demo | 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 |
Unlock unlimited learning
Get instant access to all 37 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsSimilar courses
React - The full course
Sources: fireship.io
React - The Full Course is unlike any other React course on the Internet. It provides a fast-paced introduction to essential concepts, then puts them into practice by building m...
1 hour 20 minutes 10 seconds
The complete React Fullstack course ( 2021 edition )
Sources: udemy
Do you want to learn the whole process of building your App ?. This is the course for you. We will start from the very beginning, from "I don't even know how use it..and why wo...
76 hours 58 minutes 6 seconds
React and WebRTC 2023 & Sharing Location App with Video Chat
Sources: udemy
Learn technologies like React, WebRTC (PeerJS) , SocketIO and Google Maps API by creating amazing project ,,GeoCall''. In this practical course we will jump str
8 hours 11 minutes 54 seconds
React Redux Ecommerce - Master MERN Stack Web Development
Sources: udemy
Master MERN Stack Web Development building Ultimate E-commerce app with React Redux Ant Design Firebase NodeJs and MongoDB. This project will have almost all the features you wa...
43 hours 9 minutes 35 seconds
Classic React
Sources: Build UI
The best course in the world to take you from zero to enterprise grade React. Stop reading out-of-date tutorials and watching crappy screen-share videos. We use a linear approac...
4 hours 10 minutes 15 seconds
Want to join the conversation?
Sign in to comment