Skip to main content

React Testing Library and Jest: The Complete Guide

7h 40m 24s
English
Paid

Course description

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.

Read more about the course

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 85 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online React Testing Library and Jest: The Complete Guide

0:00
/
#1: How to Get Help

All Course Lessons (85)

#Lesson TitleDurationAccess
1
How to Get Help Demo
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

Unlock unlimited learning

Get instant access to all 84 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Fullstack ASP.NET Core and React Masterclass | Learnify

Fullstack ASP.NET Core and React Masterclass | Learnify

Sources: fullstack.io
Learnify is a self-paced, online Masterclass, where you will master ASP.NET CORE and React by building a practical, real-world application from scratch.
20 hours 40 minutes 31 seconds
The Joy of React

The Joy of React

Sources: Josh Comeau
The all-new interactive learning experience that teaches you how to build rich, dynamic web apps with React. So, let’s be real. Learning React is hard. Over the past few years...
25 hours 35 minutes 33 seconds
Bedrock: Jumpstart your next SaaS product

Bedrock: Jumpstart your next SaaS product

Sources: Max Stoiber (@mxstbr)
The modern full-stack Next.js & GraphQL boilerplate with user authentication, subscription payments, teams, invitations, emails and everything else you need.
NFT Marketplace in React, Typescript & Solidity - Full Guide

NFT Marketplace in React, Typescript & Solidity - Full Guide

Sources: udemy
The course covers everything you need for a decentralized NFT application according to the ERC721 standard. Students of this course will learn about NFTs by creating a real-worl...
16 hours 20 minutes 55 seconds
Fullstack React with Typescript

Fullstack React with Typescript

Sources: fullstack.io
Fullstack React with TypeScript is the complete guide to using TypeScript with React. Learn TypeScript patterns with React additional ecosystem advice (testing, redux, SSR) by b...
10 hours 16 minutes 46 seconds