Skip to main content
CF

Testing React with Jest and Testing Library

7h 41m 32s
English
Paid

React Testing Library has become an extremely popular option for testing React applications, and with good reason! This comprehensive course provides a solid foundation for creating robust tests for React apps.

Embracing Best Practices

React Testing Library advocates certain testing best practices, focusing on enhancing code quality and maintainability. This course covers these key practices:

  • Emphasizing testing behavior over implementation.

  • Creating tests that interact with your app just like a real user would.

  • Identifying elements using accessibility handles to ensure your code is as accessible as possible.

Diverse Testing Examples

The course begins with straightforward examples, such as changing a button's color on click. As you progress, you'll encounter more advanced testing concepts, including:

  • Testing asynchronous page changes.

  • Simulating server data using Mock Service Worker.

  • Using context providers when rendering components.

Concepts are introduced gradually, supporting your learning journey and ensuring your mastery of advanced testing strategies.

Hands-On Skill Practice

Gain practical experience with numerous opportunities to apply your skills throughout the course. Engage in "code quizzes" while developing course projects, allowing you to practice and then verify your solutions through video explanations. The optional final section offers additional exercises to complete the second app, reinforcing the course’s concepts.

Optional React Lectures

All significant React code presented in the course is available in separate lectures. You have the option to reinforce your React skills by viewing these lectures or skipping them if you already feel confident in your React abilities.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 82 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Introduction to Testing Library and Jest
All Course Lessons (82)
#Lesson TitleDurationAccess
1
Introduction to Testing Library and Jest Demo
04:07
2
Create-React-App
02:18
3
First Test with Testing Library
06:31
4
Jest and Jest-DOM Assertions
04:12
5
Jest: Watch Mode and How Tests Work
07:40
6
TDD: Test Driven Development
03:29
7
React Testing Library Philosophy
04:30
8
Functional Testing vs Unit Testing
04:21
9
TDD (Test Driven Development) vs BDD (Behavior Driven Development)
01:28
10
Testing Library and Accessibility
06:47
11
Overall Course Plan
03:24
12
Start Color Button App
10:57
13
Test that Finds Button by Role and Clicks Button
07:44
14
OPTIONAL React Code: Click Button to Change Color
06:29
15
Manual Acceptance Testing
01:22
16
Test Initial Condition of Button and Checkbox
06:07
17
Introduction to Code Quizzes
03:36
18
Code Quiz! Confirm Button Disable on Checkbox Check
02:32
19
Code Quiz Solution: Confirm Button Disable on Checkbox Check
03:36
20
Finding Checkbox with Label
03:28
21
Code Quiz! Disabled Button Turns Gray
03:26
22
Unit Testing Functions
08:52
23
Code Quiz! Update Tests for New Color Names
02:45
24
When to Unit Test
02:12
25
Review: Simple App
01:36
26
ESLint and Prettier
03:50
27
ESLint for Testing Library and Jest-DOM
03:54
28
Configure ESLint in VSCode
07:02
29
Configure Prettier in VSCode
01:42
30
Review: ESLint and Prettier
01:22
31
Introduction to Sundaes on Demand
08:42
32
ESLint and Prettier Setup
05:02
33
React Bootstrap Setup
03:34
34
Code Organization and Introduction to SummaryForm
04:58
35
Code Quiz: Checkbox Enables Button
05:41
36
OPTIONAL React Code: SummaryForm Checkbox and Button
02:16
37
React Bootstrap Popover and Testing Library userEvent
06:31
38
Screen Query Methods
05:05
39
Testing Element is Not on Page: Start Popover Tests
08:59
40
OPTIONAL React Code: Popover
03:08
41
"Not wrapped in act(...)" Error, Async Disappearance
06:10
42
Review: Summary Form
02:54
43
OrderEntry Server Data Introduction
02:33
44
Introduction to Mock Service Worker and Handlers
08:47
45
Setting up the Mock Service Worker Server
03:55
46
Tests with Mock Service Worker: Scoop Options
08:38
47
OPTIONAL React Code: Options and ScoopOption Components
13:50
48
Using `await findBy` to Find Elements that Populate Asynchronously
03:16
49
Code Quiz! Topping Options from Server
07:53
50
Error Server Response Planning
03:41
51
Simulating Server Error Response in Tests
09:29
52
OPTIONAL React Code: Alert Banner for Options Server Error
07:06
53
Running only Selected Tests, and `waitFor`
06:21
54
Review: Server Error Response and Test Debugging Tools
02:15
55
Intro to Tests for Total and Subtotals
01:01
56
Entering Text Input: Subtotal Tests
10:48
57
OPTIONAL React Code: OrderDetails Context
25:13
58
OPTIONAL React Code: Use Context to Display Scoops Subtotal
16:41
59
Adding Context to Test Setup; Test Catching Error in Code
08:57
60
Creating Custom Render to Wrap in Provider By Default
07:41
61
Review: Scoops Subtotal with Context
02:04
62
Code Quiz! Toppings Subtotal
07:02
63
OPTIONAL React Code: Toppings Checkboxes
03:18
64
Code Quiz! Grand Total
11:31
65
"Unmounted Component" Error
06:25
66
What Should Functional Tests Catch? and Refactor
07:32
67
Introduction to Final Exam: Order Phases
07:05
68
Adding a New Handler: Copy/Paste Warning!
03:18
69
Debugging Tips
06:53
70
OPTIONAL React Hints for Order Phase Coding
04:07
71
Final Exam Solution
04:44
72
OPTIONAL React Code: Order Phases
06:47
73
Jest Mock Functions as Props
04:41
74
Review: Final Exam, and Introduction to Optional Practice
04:05
75
Standard Questions for New Tests and Introduction to Exercises
06:38
76
Confirm "Loading" Text
03:28
77
Conditional Toppings Section on Summary Page
04:06
78
Disable Order Button if No Scoops Ordered
03:50
79
Red Input Box for Invalid Scoop Count
10:40
80
No Scoops Subtotal Update for Invalid Scoop Count
04:13
81
Server Error on Order Confirmation Page
05:48
82
Congratulations and Thank You!
00:53
Unlock unlimited learning

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

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for this course?
This course assumes a working knowledge of React, as it focuses on testing React applications. Familiarity with JavaScript and basic web development concepts is also recommended. Experience with tools like Create-React-App will be beneficial, as the course covers its use early on.
What projects will I build during the course?
Throughout the course, you will engage in various projects, including building a color-changing button app and a Sundaes on Demand app. These projects provide practical experience with testing asynchronous data changes, simulating server responses, and using context providers.
What specific tools and libraries are covered in this course?
The course covers Jest and React Testing Library extensively. You will also learn about Jest-DOM assertions, the use of Mock Service Worker for simulating server data, and integrating ESLint and Prettier in your testing environment.
How does this course compare in depth to other React testing courses?
This course emphasizes practical experience with React Testing Library and Jest. It starts with simple examples and progresses to advanced testing concepts, ensuring a gradual learning curve. The course's focus on best practices distinguishes it from others, particularly in testing behavior over implementation.
What topics are not covered in this course?
While the course is comprehensive in testing React applications, it does not cover testing frameworks beyond Jest and Testing Library. It also assumes prior knowledge of basic React development, so it does not delve into introductory React concepts.
What is the estimated time commitment for completing the course?
The course consists of 82 lessons, with the first 60 detailed in the content list. While the total runtime is not specified, students should consider additional time for engaging in code quizzes and optional exercises to reinforce learning.
How can the skills learned in this course be applied to other areas or careers?
The skills learned in this course, such as writing robust tests and understanding TDD and BDD principles, are valuable for any software development career. Mastery of testing libraries and best practices can enhance code quality and maintainability across various projects and platforms.