React Component Testing with Vitest

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.

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.