React Testing Library and Jest: The Complete Guide

7h 40m 24s
English
Paid
September 25, 2024

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:

  1. Author smaller, easier to understand codebases

  2. Deploy your code with confidence that it will behave correctly

  3. Test each portion of your app separately - limit the chance of interrupting your users

  4. Allow each of your engineering teams to work independently

  5. 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

Join premium to watch
Go to premium
# 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

Similar courses to React Testing Library and Jest: The Complete Guide

React and NodeJS: A Practical Guide with Typescript

React and NodeJS: A Practical Guide with Typescriptudemy

Duration 6 hours 54 minutes 59 seconds
Server side rendering with Next + React

Server side rendering with Next + Reactudemy

Duration 29 hours 43 minutes 19 seconds
Learn React 19 with Epic React v2

Learn React 19 with Epic React v2Kent C. Dodds

Duration 26 hours 51 minutes 3 seconds
Redux

Reduxui.dev (ex. Tyler McGinnis)

Duration 7 hours 13 minutes 23 seconds
React Simplified - Beginner

React Simplified - Beginnerwebdevsimplified.com

Duration 10 hours 58 minutes 46 seconds
Build a Spotify Connected App

Build a Spotify Connected Appfullstack.io

Duration 3 hours 47 minutes 28 seconds
Building Applications with React 17 and ASP.NET Core 6

Building Applications with React 17 and ASP.NET Core 6udemy

Duration 19 hours 28 minutes 31 seconds
React: Flux Architecture (ES6)

React: Flux Architecture (ES6)egghead

Duration 49 minutes 50 seconds