React Component Testing with Vitest

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 38 Lessons (1h 38m) | 491 MB

The closer your tests resemble how your software is being used, the more confidence they will give you. There’s so many great patterns stemming from this simple rule, patterns I’m sure you’re already using to write better tests.

Then, there’s the elephant in the room. Your test environment.

For decades, web developers have been testing their UIs in make-believe environments that are neither the browser nor Node.js. It made them come up with a frankly ridiculous amount of test setup, polyfills, and workarounds just to make it work. Remember when you had to mock location in tests? window.matchMedia? Yeah…

It’s time to abandon such practices. The tools have improved and there’s no excuse for you to be sleeping on it. It’s time for you to learn how to use Vitest Browser Mode for in-browser component testing!

What You’ll Learn
In this workshop, you will learn a new approach to component testing that’s both different and the same. It is different because you will write and run your tests in the actual browser, taking advantage of the standard APIs and powerful browser automation. It is the same because it’s still the component level test you know and love, with rendering, querying, and asserting.

Your users don’t interact with the UIs you build in JSDOM. They do that in the real browser, and now your tests will too!

Sunsetting JSDOM
The first step in our journey is understanding why browser-like environments fall short. JSDOM has served us well, but it’s time to recognize its limitations. You’ll experience firsthand how browser-like environments like JSDOM are letting you down.

We’ll explore examples of valid JavaScript code that works perfectly in browsers and Node.js but fails in JSDOM, undermining the value of the tests you work so hard to write. You’ll discover why these inconsistencies happen and why moving to real browser testing is the solution.

Vitest Browser Mode
Vitest Browser Mode allows you to run isolated component-level tests in the actual browser while providing the convenience and flexibility of integration-level testing. It’s not a full end-to-end testing framework like Playwright or Cypress, but rather the perfect middle ground for component testing.

In this module, you’ll learn:

• How to install and configure Vitest Browser Mode in your project;
• The technical differences between how JSDOM and Browser Mode run your tests;
• Steps needed to migrate existing JSDOM tests to Browser Mode;
• How to set up Playwright as the browser automation provider for your component tests;
• Common setup scenarios like applying global assets in tests and configuring Vitest for both unit and component-level testing within the same project.

Best Practices
Choosing the right tools is important, but knowledge that transcends any particular tool is even more valuable. In this section, we’ll focus on five key areas of best practices when it comes to testing your React components:

• Queries: Find elements on the page the same way your users or their assistive technology would;
• User events: Interact with the tested elements from the user’s perspective;
• API mocking: Use Mock Service Worker to intercept requests and handle their responses as well as discover how to efficiently use MSW in -Vitest Browser Mode by creating a custom test context;
• Element presence: Test elements that should (or shouldn’t) appear on the page reliably without false positives or flaky results.
• Page navigation: Learn where to draw the line when testing page transitions and routing in the actual browser.

Debugging Tests
The true value of tests comes when they fail. But dealing with failing tests can be quite frustrating without the right techniques.

In this block, you’ll learn some of my favorite debugging techniques that go well beyond console logging:

• How to inspect the DOM state at any point in test;
• Using the debugger statement to stop JavaScript execution entirely;
• Wielding conditional breakpoints to step through the problematic code.

These techniques will transform your approach to test failures from dread to confidence so the next time you see a failing test you will know what to do.

Who Is This Workshop For
This workshop is for all React developers who want to write reliable and valuable tests for their components. Whether you’re new to component testing or have been writing tests for years, you will inevitably learn new tools, APIs, and techniques to gain more value out of your test suite. That’s my sole motivation behind this material.

Table of Contents

1 Introduction to React Component Testing with Vitest Browser Mode
2 Sunsetting JSDOM
3 Break JSDOM – Problem
4 Break JSDOM – Solution
5 Recap Of Sunsetting JSDOM
6 Vitest Browser Mode
7 Installation and Setup – Problem
8 Installation and Setup – Solution
9 Migrate The Test – Problem
10 Migrate The Test – Solution
11 Playwright – Problem
12 Playwright – Solution
13 Shared Ass – Problem
14 Shared Ass – Solution
15 Multiple Workspaces – Problem
16 Multiple Workspaces – Solution
17 Outro Vitest Browser Mode
18 Best Practices
19 Queries – Problem
20 Queries – Solution
21 User Eve – Problem
22 User Eve – Solution
23 Network Mocking – Problem
24 Network Mocking – Solution
25 Element Presence – Problem
26 Element Presence – Solution
27 Page Navigation – Problem
28 Page Navigation – Solution
29 Recap Of Best Practices
30 Debugging Te
31 DOM Snapsh – Problem
32 DOM Snapsh – Solution
33 Debugger – Problem
34 Debugger – Solution
35 Breakpoi – Problem
36 Breakpoi – Solution
37 Recap Of Debugging
38 React Component Testing with Vitest Outro

Homepage