Testing React with Jest and Testing Library

7h 41m 32s
English
Paid

Course description

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

Read more about the course

Best Practices

React Testing Library is famously opinionated about testing best practices, and is written to encourage these best practices. This course teaches:

  • testing behavior over testing implementation

  • tests that interact with your app the way a user would

  • finding elements by accessibility handles, to make sure your code is accessible as possible

Broad range of testing examples

The course apps start very with very simple examples (clicking a button to change its color) and work up to progressively more complicated testing concepts, such as: 

  • testing asynchronous page changes

  • simulating data from a server using Mock Service Worker

  • applying a context provider to a component when rendering

The course builds up to complex concepts gradually, in a way designed to support your learning and ensure your success.

Practice your new skills

You will also have plenty of opportunities to practice what you’ve learned. The course provides "code quizzes" while building the course projects, where you can apply what you learned and then watch a video to see the solution. The (optional) final section provides even more exercises to complete the second app and reinforce concepts from the course.

Optional React lectures

Any significant React code covered in the course is isolated into separate lectures. Students have a choice: those who want to reinforce their React skills (or learn new ones!) can watch those lectures, while students who feel confident in their React skills can skip them.

Watch Online

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

Watch Online Testing React with Jest and Testing Library

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Laravel with React JS - Build Twitter Like Real Time Web App

Laravel with React JS - Build Twitter Like Real Time Web App

Sources: udemy
Do you want to use React Js with Laravel to build powerful web applications? How about building a twitter like real time web app while learning Modern JavaScrip
4 hours 56 minutes 37 seconds
Full-Stack Fundamentals 1 - Frontend

Full-Stack Fundamentals 1 - Frontend

Sources: Mckay Wrigley (takeoff)
As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
1 hour 8 minutes 57 seconds
React, NextJS and NestJS: A Rapid Guide - Advanced

React, NextJS and NestJS: A Rapid Guide - Advanced

Sources: udemy
React with Typescript, Next.js, Redux, NestJS, Docker, Redis, Stripe, Frontend & Backend Filtering. Learn how to create an Ambassador App using React, NextJS an
8 hours 40 minutes 51 seconds
Building Large Scale Web Apps | A React Field Guide

Building Large Scale Web Apps | A React Field Guide

Sources: Addy Osmani, Hassan Djirdeh
CODE SMART, SCALE FAST, CONQUER CHALLENGES. Learn tools and techniques to build and maintain large-scale React web applications. “Building Large Scale Web Apps” is a toolkit to ...