React Testing Library and Jest: The Complete Guide

7h 40m 24s
English
Paid

Congratulations! You've discovered the mostpopular, mostcomprehensive, and mostup-to-date resource available online for mastering React app testing with React Testing Library and Jest! Thousands of engineers have successfully learned testing through this course, and so can you. Employing a time-tested, battle-proven method, this course ensures you understand precisely how testing functions, potentially securing you a new role as a software engineer or aiding you in developing that app you've always dreamt about.

Why Choose This Course?

The distinctive factor: Gain insights into design patterns employed by leading firms for testing substantial React applications.

The Importance of Testing

Testing validates your code's expected behavior, offering several unique benefits to any frontend development:

  1. Create smaller, more comprehensible codebases

  2. Deploy with confidence, ensuring correct behavior

  3. Test app sections individually to minimize user disruption

  4. Facilitate independent team work on engineering teams

  5. Modify codebases without risking existing functionality

Although testing is popular, online misinformation abounds. Collaborating with top engineers, this course assures total technical accuracy.

Course Projects and Learning Outcomes

What Will You Build?

This course emphasizes testing components across various environments. You'll start by writing tests for a small mini-project to gain initial experience. Progressing onward, you'll explore React Testing Library comprehensively by creating a series of interactive cheatsheets—excellent future references for testing intricacies. Finally, you'll apply tests to a larger React app inclusive of authentication, data fetching, and navigation features.

Topics Covered

  • Customize testing environments with custom Jest matchers

  • Learn to debug tests through extensive bug fixes

  • Accelerate test execution using a fake data-fetching process

  • Implement best practices in a large React project

  • Explore all functionalities bundled within React Testing Library

  • Enhance element selection using the ARIA Role system

  • Gain experience in testing authentication and routing

  • Develop efficient tests utilizing numerous testing shortcuts

  • Demystify the ‘act’ function in React

  • Learn techniques for handling third-party libraries during testing

  • Utilize Jest to ‘mock’ functions and libraries

Instructor's Expertise

Having spent the early years of my software engineering career focused on testing, practicing Test Driven Development to create thousands of lines of code under the mentorship of industry leaders, I am eager to share this knowledge with you. Testing is one of my fiercest passions, and I strive to instill the same enthusiasm in you.

About the Authors

Stephen Grider

Stephen Grider thumbnail
Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers. Invest in yourself by learning from Stephen's published courses.

udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 85 lessons

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