React Testing Library

Learn best practices for testing your apps with Jest and React Testing Library!

Last updated 2022-01-10 | 4.7

- Testing simple and complex React applications with React Testing Library
- React Testing best Practices: how to test behavior instead of implementation
- Making the most of Jest watch mode
- including running only one file or test at a time

What you'll learn

Testing simple and complex React applications with React Testing Library
React Testing best Practices: how to test behavior instead of implementation
Making the most of Jest watch mode
including running only one file or test at a time
Common errors returned by Testing Library and how to correct them

* Requirements

* Experience with JavaScript
* Basic experience with React
* Familiarity with React hooks and context (these are explained briefly in optional React portions of the course; however previous experience would be helpful)

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.

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.

Supportive Instructor

The instructor has a proven track record of responding to course Q&A in a helpful and supportive way. She loves to engage with students, answer questions about course concepts, and help debug students' code for the course projects.

Who this course is for:

  • React coders who want to learn how to write functional tests for their apps
  • React application engineers who want confidence that writing code doesn't break existing behavior (tests, for the win!)

Course content

9 sections • 91 lectures

Introduction to Testing Library and Jest Preview 04:06

Create-React-App Preview 02:17

First Test with Testing Library Preview 06:30

Jest and Jest-DOM Assertions Preview 04:11

Jest: Watch Mode and How Tests Work Preview 07:39

TDD: Test Driven Development Preview 03:28

React Testing Library Philosophy Preview 04:29

Functional Testing vs Unit Testing Preview 04:20

TDD (Test Driven Development) vs BDD (Behavior Driven Development) Preview 01:27

Testing Library and Accessibility Preview 06:46

Overall Course Plan Preview 03:23

Start Color Button App Preview 10:56

Test that Finds Button by Role and Clicks Button Preview 07:43

OPTIONAL React Code: Click Button to Change Color Preview 06:28

Manual Acceptance Testing Preview 01:21

Test Initial Condition of Button and Checkbox Preview 06:06

Introduction to Code Quizzes Preview 03:35

Code Quiz! Confirm Button Disable on Checkbox Check Preview 02:31

Code Quiz Solution: Confirm Button Disable on Checkbox Check Preview 03:35

Finding Checkbox with Label Preview 03:27

Code Quiz! Disabled Button Turns Gray Preview 03:25

Unit Testing Functions Preview 08:51

Code Quiz! Update Tests for New Color Names Preview 02:44

When to Unit Test Preview 02:11

Review: Simple App Preview 01:35

ESLint and Prettier Preview 03:49

NOTE: update to the following lecture! Preview 00:08

ESLint for Testing Library and Jest-DOM Preview 03:53

PLEASE READ: update to the following lecture Preview 00:23

Configure ESLint in VSCode Preview 07:00

Instructions for displaying ESLint in the status bar for VSCode 1.58.0+ Preview 00:36

Configure Prettier in VSCode Preview 01:41

Review: ESLint and Prettier Preview 01:20

Introduction to Sundaes on Demand Preview 08:41

ESLint and Prettier Setup Preview 05:01

React Bootstrap Setup Preview 03:33

Code Organization and Introduction to SummaryForm Preview 04:57

Code Quiz: Checkbox Enables Button Preview 05:40

OPTIONAL React Code: SummaryForm Checkbox and Button Preview 02:15

React Bootstrap Popover and Testing Library userEvent Preview 06:30

Screen Query Methods Preview 05:04

Testing Element is Not on Page: Start Popover Tests Preview 08:58

NOTE for those using react-bootstrap 2.x Preview 00:23

OPTIONAL React Code: Popover Preview 03:06

"Not wrapped in act(...)" Error, Async Disappearance Preview 06:09

Review: Summary Form Preview 02:52

OrderEntry Server Data Introduction Preview 02:32

Introduction to Mock Service Worker and Handlers Preview 08:46

Setting up the Mock Service Worker Server Preview 03:54

Tests with Mock Service Worker: Scoop Options Preview 08:37

OPTIONAL React Code: Options and ScoopOption Components Preview 13:49

Using `await findBy` to Find Elements that Populate Asynchronously Preview 03:14

Code Quiz! Topping Options from Server Preview 07:52

Error Server Response Planning Preview 03:40

Simulating Server Error Response in Tests Preview 09:28

NOTE: last half of next lecture is NOT optional! Preview 00:17

OPTIONAL React Code: Alert Banner for Options Server Error Preview 07:04

Running only Selected Tests, and `waitFor` Preview 06:20

Tests passing but getting warnings / errors? Preview 01:01

Review: Server Error Response and Test Debugging Tools Preview 02:14

Intro to Tests for Total and Subtotals Preview 01:00

Entering Text Input: Subtotal Tests Preview 10:47

OPTIONAL React Code: OrderDetails Context Preview 25:12

OPTIONAL React Code: Use Context to Display Scoops Subtotal Preview 16:40

Adding Context to Test Setup; Test Catching Error in Code Preview 08:56

Creating Custom Render to Wrap in Provider By Default Preview 07:40

Review: Scoops Subtotal with Context Preview 02:03

Code Quiz! Toppings Subtotal Preview 07:01

OPTIONAL React Code: Toppings Checkboxes Preview 03:17

Note on equivalent error strings for next lecture Preview 00:33

Code Quiz! Grand Total Preview 11:30

"Unmounted Component" Error Preview 06:24

What Should Functional Tests Catch? and Refactor Preview 07:31

Introduction to Final Exam: Order Phases Preview 07:04

Adding a New Handler: Copy/Paste Warning! Preview 03:17

Debugging Tips Preview 06:52

OPTIONAL React Hints for Order Phase Coding Preview 04:06

Final Exam Solution Preview 04:43

OPTIONAL React Code: Order Phases Preview 06:46

Jest Mock Functions as Props Preview 04:40

Review: Final Exam, and Introduction to Optional Practice Preview 04:04

Common Mistakes with React Testing Library Preview 00:23

Standard Questions for New Tests and Introduction to Exercises Preview 06:37

Confirm "Loading" Text Preview 03:26

Conditional Toppings Section on Summary Page Preview 04:05

Disable Order Button if No Scoops Ordered Preview 03:49

Red Input Box for Invalid Scoop Count Preview 10:39

No Scoops Subtotal Update for Invalid Scoop Count Preview 04:12

Server Error on Order Confirmation Page Preview 05:47

Congratulations and Thank You! Preview 00:52