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

Testing React Apps with React Testing Library

Testing React Apps with React Testing Library

Sources: codewithmosh (Mosh Hamedani)
Tired of piecing together disconnected tutorials or dealing with rambling, confusing instructors? This course is for you! It's perfectly structured into a series of bite-sized, ...
6 hours 48 minutes 20 seconds
The Modern React 18 Bootcamp - A Complete Developer Guide

The Modern React 18 Bootcamp - A Complete Developer Guide

Sources: udemy
In this course we will take you from a React 18 novice to a job ready engineer. This course is loaded with practical projects and examples so that you can truly
20 hours 35 minutes 57 seconds
The Ultimate React Course 2024: React, Redux & More

The Ultimate React Course 2024: React, Redux & More

Sources: udemy
In 2024, React is still the #1 skill to learn if you want to become a successful front-end developer! But it can be hard. There are so many moving parts, so ma
83 hours 56 minutes 37 seconds
React: Flux Architecture (ES6)

React: Flux Architecture (ES6)

Sources: egghead
As a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage state across the application? How is data shared b...
49 minutes 50 seconds
Next.js - The Full Course

Next.js - The Full Course

Sources: fireship.io
Next.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil
1 hour 14 minutes 14 seconds