Testing React with Jest and React Testing Library RTL

Learn best practices for testing your apps with Jest and React Testing Library!
Testing React with Jest and React Testing Library RTL
File Size :
4.19 GB
Total length :
8h 1m

Category

Instructor

Bonnie Schulkin

Language

Last update

4/2023

Ratings

4.5/5

Testing React with Jest and React Testing Library RTL

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

Testing React with Jest and React Testing Library RTL

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 PracticesReact Testing Library is famously opinionated about testing best practices, and is written to encourage these best practices. This course teaches: testing behavior over testing implementationtests that interact with your app the way a user wouldfinding elements by accessibility handles, to make sure your code is accessible as possibleBroad range of testing examplesThe 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 changessimulating data from a server using Mock Service Workerapplying a context provider to a component when renderingThe course builds up to complex concepts gradually, in a way designed to support your learning and ensure your success.Practice your new skillsYou 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 lecturesAny 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 InstructorThe 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.

Overview

Section 1: Introduction

Lecture 1 Introduction to Testing Library and Jest

Lecture 2 Create-React-App

Lecture 3 First Test with Testing Library

Lecture 4 Jest and Jest-DOM Assertions

Lecture 5 Jest: Watch Mode and How Tests Work

Lecture 6 TDD: Test Driven Development

Lecture 7 React Testing Library Philosophy

Lecture 8 Functional Testing vs Unit Testing

Lecture 9 TDD (Test Driven Development) vs BDD (Behavior Driven Development)

Lecture 10 Testing Library and Accessibility

Lecture 11 RESOURCE: Where to find code if you’d rather not write React for this course

Lecture 12 TROUBLESHOOTING: Errors from Node 17 and above

Section 2: Simple App: Color Button

Lecture 13 Overall Course Plan

Lecture 14 Start Color Button App

Lecture 15 JEST-DOM BUG! False positives with camelCase `toHaveStyles`

Lecture 16 `logRoles` method for debugging roles

Lecture 17 Test Behavior when Clicking Button

Lecture 18 OPTIONAL React Code: Click Button to Change Color

Lecture 19 Manual Acceptance Testing

Lecture 20 Test Initial Condition of Button and Checkbox

Lecture 21 OPTIONAL: Testing styles from imported CSS modules

Lecture 22 Introduction to Code Quizzes

Lecture 23 Code Quiz! Confirm Button Disable on Checkbox Check

Lecture 24 Code Quiz Solution: Confirm Button Disable on Checkbox Check

Lecture 25 Finding Checkbox with Label

Lecture 26 Code Quiz! Disabled Button Turns Gray

Lecture 27 Unit Testing Functions

Lecture 28 Code Quiz! Update Tests for New Color Names

Lecture 29 When to Unit Test

Lecture 30 Review: Simple App

Section 3: ESLint with Testing Library, plus Prettier

Lecture 31 ESLint and Prettier

Lecture 32 ESLint for Testing Library and Jest-DOM

Lecture 33 Instructions for displaying ESLint in the status bar for ESLint extension 2.4.0+

Lecture 34 Configure ESLint in VSCode

Lecture 35 Configure Prettier in VSCode

Lecture 36 Review: ESLint and Prettier

Section 4: Sundaes On Demand: Form Review and Popover

Lecture 37 Introduction to Sundaes on Demand

Lecture 38 ESLint and Prettier Setup

Lecture 39 React Bootstrap Setup

Lecture 40 Code Organization and Introduction to SummaryForm

Lecture 41 Code Quiz: Checkbox Enables Button

Lecture 42 OPTIONAL React Code: SummaryForm Checkbox and Button

Lecture 43 React Bootstrap Popover and Testing Library userEvent

Lecture 44 IMPORTANT, PLEASE READ!: code update required to avoid errors

Lecture 45 Replace `fireEvent` with `userEvent`

Lecture 46 Screen Query Methods

Lecture 47 Testing Element is Not on Page: Popover Tests

Lecture 48 OPTIONAL React Code: Popover

Lecture 49 Review: Summary Form

Section 5: Simulating Server Response with Mock Service Worker

Lecture 50 OrderEntry Server Data Introduction

Lecture 51 Introduction to Mock Service Worker and Handlers

Lecture 52 Why not mock axios using Jest?

Lecture 53 Setting up the Mock Service Worker Server

Lecture 54 Tests with Mock Service Worker: Scoop Options

Lecture 55 IMPORTANT, PLEASE READ: axios issue with 1.x

Lecture 56 OPTIONAL React Code: Options and ScoopOption Components

Lecture 57 Using `await findBy` to Find Elements that Populate Asynchronously

Lecture 58 Code Quiz! Topping Options from Server

Lecture 59 TROUBLESHOOTING: `Unable to find role=”img”` error

Lecture 60 Error Server Response Planning

Lecture 61 Simulating Server Error Response in Tests

Lecture 62 OPTIONAL React Code: Alert Banner for Options Server Error

Lecture 63 Running only Selected Tests, and `waitFor`

Lecture 64 TROUBLESHOOTING: Tests passing but getting warnings / errors?

Lecture 65 OPTIONAL: Frequent Question: Why doesn’t “name” work with the role “alert”?

Lecture 66 Review: Server Error Response and Test Debugging Tools

Section 6: Testing Components Wrapped in a Provider

Lecture 67 Intro to Tests for Total and Subtotals

Lecture 68 Entering Text Input: Subtotal Tests

Lecture 69 OPTIONAL React Code: OrderDetails Context

Lecture 70 OPTIONAL React Code: Use Context to Display Scoops Subtotal

Lecture 71 Adding Context to Test Setup

Lecture 72 TROUBLESHOOTING: “not wrapped in act(…)” error during next lecture

Lecture 73 Creating Custom Render to Wrap in Provider By Default

Lecture 74 Review: Scoops Subtotal with Context

Lecture 75 Code Quiz! Toppings Subtotal

Lecture 76 OPTIONAL React Code: Toppings Checkboxes

Lecture 77 Note on equivalent error strings for next lecture

Lecture 78 Code Quiz! Grand Total

Lecture 79 “Not wrapped in act()…” Error

Lecture 80 OPTIONAL: Why is the explicit unmount needed

Lecture 81 Manual Acceptance Testing

Section 7: Final Exam: Order Phases

Lecture 82 Introduction to Final Exam: Order Phases

Lecture 83 Adding a New Handler: Copy/Paste Warning!

Lecture 84 Debugging Tips

Lecture 85 OPTIONAL React Hints for Order Phase Coding

Lecture 86 Final Exam Solution

Lecture 87 TROUBLESHOOTING: “loading” test fails

Lecture 88 OPTIONAL React Code: Order Phases

Lecture 89 Jest Mock Functions as Props

Lecture 90 Review: Final Exam, and Introduction to Optional Practice

Lecture 91 Common Mistakes with React Testing Library

Section 8: Optional Extra Practice

Lecture 92 Standard Questions for New Tests and Introduction to Exercises

Lecture 93 Confirm “Loading” Text

Lecture 94 Conditional Toppings Section on Summary Page

Lecture 95 Disable Order Button if No Scoops Ordered

Lecture 96 Red Input Box for Invalid Scoop Count

Lecture 97 No Scoops Subtotal Update for Invalid Scoop Count

Lecture 98 Server Error on Order Confirmation Page

Lecture 99 Congratulations and Thank You!

Section 9: Bonus

Lecture 100 Coupons!

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 Information:

Udemy | English | 8h 1m | 4.19 GB
Created by: Bonnie Schulkin

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top