4.69 out of 5
4.69
1855 reviews on Udemy

React Testing Library and Jest: The Complete Guide

A complete, all-in-one guide to fully testing your React projects using React Testing Library and Jest.
Instructor:
Stephen Grider
13,865 students enrolled
English [Auto] More
Everything you need to know about testing React Components using React Testing Library and Jest
Understand how to simulate user events and data fetching in a test environment
Verify your components the way your components work - before deploying them!
Get practical, hands-on experience adding tests to a large React project
Explore hidden aspects of testing that aren't covered in any other testing course
Save time by building your own custom Jest matchers
Focus on learning why best practices exist - and when to break them!

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.

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.  Sign up today and join me!

Dive In - Let's Get Started!

1
How to Get Help
2
Important Note About CodeSandbox Beta Editor
3
Start Testing... Now!
4
A Few Critical Questions
5
Join Our Community!

A Whirlwind Overview of Testing

1
Project Setup
2
Quick Note
3
Adding the Form
4
Handling User Input
5
Rendering the List of Users
6
Completed Users Project
7
Our First Test
8
Element Query System
9
Understanding ARIA Roles
10
Understanding Jest Matchers
11
test was not wrapped in act(...) Warning and Test Failure
12
Simulating User Events
13
Recording Function Calls
14
Introducing Mock Functions
15
Querying Elements by Labels
16
Testing the UserList
17
Getting Help with Query Functions
18
Query Function Escape Hatches
19
Another Query Function Fallback
20
Testing Table Contents
21
Avoiding BeforeEach
22
Reminder on Async Await and act Warnings
23
Testing the Whole App
24
A Touch of Test Driven Development
25
Feature Implementation

Understanding Element Roles

1
Introducing RTL Book
2
A Few Notes on RTL Book
3
Partial Role List
4
Finding Elements by Role
5
Finding by Accessible Names
6
Linking Inputs to Labels
7
Directly Assigning an Accessible Name
8
Completed Roles Notebook

Finding Elements with Query Functions

1
Deeper into Query Functions
2
GetBy, QueryBy, FindBy
3
More on Single Queries
4
Multiple Element Variations
5
When to use These Queries
6
When to use Async Queries
7
Completed Queries Notebook

Query Function Suffixes

1
Query Criteria
2
When to Use Each Suffix
3
Completed Criteria Notebook

Matchers in Jest

1
Diving into Matchers
2
Introducing Custom Matchers
3
Implementing a Custom Matcher

Big Project Overview

1
Required Project Setup - Do Not Skip
2
App Overview and Setup
3
The Tech in This Project
4
The Path Ahead
5
A Process for Debugging
6
Understanding Data Flowing Into the Component
7
Developing a Test and a Fix
8
Looping Over Assertions
9
Flexible Queries

The Mysterious 'Act' Function!

1
Another Bug!
2
Analyzing the Data... Again!
3
Adding Router Context
4
Unexpected State Updates
5
Act Included with React Testing Library
6
Using Act (Hopefully Not!) with RTL
7
Solving the Act Warning
8
Module Mocks
9
Absolute Last Ditch Act Solution
10
Checking the Link Href
11
Implementing the Feature
12
Checking the Icon
13
Checking the Link

Handling Data Fetching in Tests

1
Easy Fix, Hard Test
2
Options for Testing Data Fetching
3
Using a Request Handler
4
Initial MSW Setup
5
Inspecting the Component State
6
Effective Request Testing
7
An Issue with Fake Handlers
8
Easier Fake Routes - Here's the Goal
9
Making a Reusable Create Server Function

Tests Around Authentication

1
Testing Authentication
2
Understanding the Auth API
3
Order of Execution
4
Scoping Test Hooks
5
Act Warnings... Again!
6
Assertions Around Auth Links
7
Wait... It Doesn't Work!?
8
Limiting Test Execution
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.7
4.7 out of 5
1855 Ratings

Detailed Rating

Stars 5
1271
Stars 4
475
Stars 3
79
Stars 2
12
Stars 1
5