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

NFT Marketplace in React, Typescript & Solidity - Full Guide

NFT Marketplace in React, Typescript & Solidity - Full Guide

Duration 16 hours 20 minutes 55 seconds
Instagram Clone Coding 3.0

Instagram Clone Coding 3.0

Duration 20 hours 48 minutes 39 seconds
React and Laravel: Breaking a Monolith to Microservices

React and Laravel: Breaking a Monolith to Microservices

Duration 15 hours 7 minutes 45 seconds
Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Duration 5 hours 51 minutes 37 seconds
AWS AppSync & Amplify with React & GraphQL - Complete Guide

AWS AppSync & Amplify with React & GraphQL - Complete Guide

Duration 11 hours 11 minutes 36 seconds
Django with React | An Ecommerce Website

Django with React | An Ecommerce Website

Duration 18 hours 6 minutes 7 seconds
Solidity & Ethereum in React (Next JS): The Complete Guide

Solidity & Ethereum in React (Next JS): The Complete Guide

Duration 38 hours 47 minutes 24 seconds
React and Typescript: Build a Portfolio Project

React and Typescript: Build a Portfolio Project

Duration 29 hours 21 minutes 48 seconds