React Testing Library and Jest: The Complete Guide
Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning how to test React apps with React Testing Library and Jest! Thousands of other engineers have learned how to test, and you can too. This course uses a time-tested, battle-proven method to make sure you understand exactly how testing works, and will get you a new job working as a software engineer or help you build that app you've always been dreaming about.
More
The difference between this course and all the others: you will understand the design patterns used by top companies to test the largest React apps around.
Testing is used to verify your code works as expected. This provides a set of unique benefits to any frontend:
Author smaller, easier to understand codebases
Deploy your code with confidence that it will behave correctly
Test each portion of your app separately - limit the chance of interrupting your users
Allow each of your engineering teams to work independently
Change your codebase without worrying about breaking an existing feature
Testing is a popular topic, but there is a lot of misinformation online. This course has been developed with input from top engineers to ensure total technical accuracy.
What will you build?
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
I spent the early years of my software engineering career writing tests non-stop. Every single day, I practiced Test Driven Development to write thousands of lines of code while being mentored by top industry engineers. Let me share this knowledge with you. Testing is one of the topics I am most passionate about, and I want you to get as excited as I am.
Watch Online React Testing Library and Jest: The Complete Guide
# | Title | Duration |
---|---|---|
1 | How to Get Help | 01:18 |
2 | Start Testing... Now! | 09:06 |
3 | A Few Critical Questions | 05:31 |
4 | Project Setup | 02:07 |
5 | Adding the Form | 04:53 |
6 | Handling User Input | 03:04 |
7 | Rendering the List of Users | 05:49 |
8 | Our First Test | 08:23 |
9 | Element Query System | 03:15 |
10 | Understanding ARIA Roles | 03:23 |
11 | Understanding Jest Matchers | 03:06 |
12 | Simulating User Events | 06:01 |
13 | Recording Function Calls | 07:41 |
14 | Introducing Mock Functions | 05:20 |
15 | Querying Elements by Labels | 07:04 |
16 | Testing the UserList | 05:32 |
17 | Getting Help with Query Functions | 08:13 |
18 | Query Function Escape Hatches | 06:59 |
19 | Another Query Function Fallback | 06:08 |
20 | Testing Table Contents | 04:13 |
21 | Avoiding BeforeEach | 03:14 |
22 | Testing the Whole App | 06:41 |
23 | A Touch of Test Driven Development | 05:38 |
24 | Feature Implementation | 03:12 |
25 | Introducing RTL Book | 02:30 |
26 | A Few Notes on RTL Book | 03:18 |
27 | Partial Role List | 04:09 |
28 | Finding Elements by Role | 05:33 |
29 | Finding by Accessible Names | 04:38 |
30 | Linking Inputs to Labels | 05:03 |
31 | Directly Assigning an Accessible Name | 05:04 |
32 | Deeper into Query Functions | 05:25 |
33 | GetBy, QueryBy, FindBy | 08:58 |
34 | More on Single Queries | 06:13 |
35 | Multiple Element Variations | 03:19 |
36 | When to use These Queries | 05:57 |
37 | When to use Async Queries | 06:55 |
38 | Query Criteria | 08:03 |
39 | When to Use Each Suffix | 07:01 |
40 | Diving into Matchers | 04:54 |
41 | Introducing Custom Matchers | 03:46 |
42 | Implementing a Custom Matcher | 06:59 |
43 | App Overview and Setup | 05:34 |
44 | The Tech in This Project | 04:23 |
45 | The Path Ahead | 05:00 |
46 | A Process for Debugging | 08:49 |
47 | Understanding Data Flowing Into the Component | 09:53 |
48 | Developing a Test and a Fix | 08:18 |
49 | Looping Over Assertions | 03:41 |
50 | Flexible Queries | 02:23 |
51 | Another Bug! | 04:49 |
52 | Analyzing the Data... Again! | 07:22 |
53 | Adding Router Context | 07:08 |
54 | Unexpected State Updates | 04:41 |
55 | Act Included with React Testing Library | 05:55 |
56 | Using Act (Hopefully Not!) with RTL | 02:20 |
57 | Solving the Act Warning | 09:58 |
58 | Module Mocks | 05:07 |
59 | Absolute Last Ditch Act Solution | 03:39 |
60 | Checking the Link Href | 02:47 |
61 | Implementing the Feature | 05:22 |
62 | Checking the Icon | 04:21 |
63 | Checking the Link | 03:18 |
64 | Easy Fix, Hard Test | 05:46 |
65 | Options for Testing Data Fetching | 05:22 |
66 | Using a Request Handler | 02:51 |
67 | Initial MSW Setup | 11:57 |
68 | Inspecting the Component State | 05:05 |
69 | Effective Request Testing | 11:35 |
70 | An Issue with Fake Handlers | 03:51 |
71 | Easier Fake Routes - Here's the Goal | 05:11 |
72 | Making a Reusable Create Server Function | 07:28 |
73 | Testing Authentication | 03:10 |
74 | Understanding the Auth API | 06:12 |
75 | Order of Execution | 06:35 |
76 | Scoping Test Hooks | 04:43 |
77 | Act Warnings... Again! | 04:49 |
78 | Assertions Around Auth Links | 04:14 |
79 | Wait... It Doesn't Work!? | 03:47 |
80 | Limiting Test Execution | 04:23 |
81 | Using Debuggers in Tests | 04:29 |
82 | Test Debugging in Action | 08:54 |
83 | One Last Debugging Hint | 03:52 |
84 | It Is a Caching Issue! | 04:29 |
85 | Solving the Caching Issue | 03:17 |