English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 92 lectures (7h 40m) | 2.82 GB
A complete, all-in-one guide to fully testing your React projects using React Testing Library and Jest.
This course focuses on testing components in a variety of different environments. You will begin by writing tests for a small mini-project, just to get some quick initial experience. From there, you’ll learn about React Testing Library and all of its functionality by building a series of interactive cheatsheets. You can use these cheatsheets as a future reference to easily remember the intricacies of testing. Finally, you’ll add tests to a rather large React app, complete with authentication, data fetching, and navigation.
Here’s a partial list of some of the topics you’ll cover:
- Customize your test environment by writing custom Jest matchers
- Learn how to debug your tests by fixing many bugs
- Run tests faster by implementing a fake data-fetching process
- Understand best practices by working on a large React project
- See an exhaustive list of all the functionality packed into React Testing Library
- Enhance your element-selecting powers by using the ARIA Role system
- Get experience testing authentication and routing
- Write more efficient tests by learning dozens of testing shortcuts
- Finally understand the most mysterious function in React – the ‘act’ function!
- Learn multiple ways of handling third-party libraries in a test environment
- Use Jest to ‘mock’ functions and libraries
What you’ll learn
- Everything you need to know about testing React Components using React Testing Library and Jest
- Understand how to simulate user events and data fetching in a test environment
- Verify your components the way your components work – before deploying them!
- Get practical, hands-on experience adding tests to a large React project
- Explore hidden aspects of testing that aren’t covered in any other testing course
- Save time by building your own custom Jest matchers
- Focus on learning why best practices exist – and when to break them!
Table of Contents
Dive In – Let’s Get Started!
1 How to Get Help
2 Start Testing… Now!
3 A Few Critical Questions
A Whirlwind Overview of Testing
4 Project Setup
5 Quick Note
6 Adding the Form
7 Handling User Input
8 Rendering the List of Users
9 Completed Users Project
10 Our First Test
11 Element Query System
12 Understanding ARIA Roles
13 Understanding Jest Matchers
14 Simulating User Events
15 Recording Function Calls
16 Introducing Mock Functions
17 Querying Elements by Labels
18 Testing the UserList
19 Getting Help with Query Functions
20 Query Function Escape Hatches
21 Another Query Function Fallback
22 Testing Table Contents
23 Avoiding BeforeEach
24 Testing the Whole App
25 A Touch of Test Driven Development
26 Feature Implementation
Understanding Element Roles
27 Introducing RTL Book
28 A Few Notes on RTL Book
29 Partial Role List
30 Finding Elements by Role
31 Finding by Accessible Names
32 Linking Inputs to Labels
33 Directly Assigning an Accessible Name
34 Completed Roles Notebook
Finding Elements with Query Functions
35 Deeper into Query Functions
36 GetBy, QueryBy, FindBy
37 More on Single Queries
38 Multiple Element Variations
39 When to use These Queries
40 When to use Async Queries
41 Completed Queries Notebook
Query Function Suffixes
42 Query Criteria
43 When to Use Each Suffix
44 Completed Criteria Notebook
Matchers in Jest
45 Diving into Matchers
46 Introducing Custom Matchers
47 Implementing a Custom Matcher
Big Project Overview
48 Required Project Setup
49 App Overview and Setup
50 The Tech in This Project
51 The Path Ahead
52 A Process for Debugging
53 Understanding Data Flowing Into the Component
54 Developing a Test and a Fix
55 Looping Over Assertions
56 Flexible Queries
The Mysterious ‘Act’ Function!
57 Another Bug!
58 Analyzing the Data… Again!
59 Adding Router Context
60 Unexpected State Updates
61 Act Included with React Testing Library
62 Using Act (Hopefully Not!) with RTL
63 Solving the Act Warning
64 Module Mocks
65 Absolute Last Ditch Act Solution
66 Checking the Link Href
67 Implementing the Feature
68 Checking the Icon
69 Checking the Link
Handling Data Fetching in Tests
70 Easy Fix, Hard Test
71 Options for Testing Data Fetching
72 Using a Request Handler
73 Initial MSW Setup
74 Inspecting the Component State
75 Effective Request Testing
76 An Issue with Fake Handlers
77 Easier Fake Routes – Here’s the Goal
78 Making a Reusable Create Server Function
Tests Around Authentication
79 Testing Authentication
80 Understanding the Auth API
81 Order of Execution
82 Scoping Test Hooks
83 Act Warnings… Again!
84 Assertions Around Auth Links
85 Wait… It Doesn’t Work!
86 Limiting Test Execution
87 Using Debuggers in Tests
88 Test Debugging in Action
89 One Last Debugging Hint
90 It Is a Caching Issue!
91 Solving the Caching Issue
Bonus!
92 Bonus!
Resolve the captcha to access the links!