Testing React Applications, v2
This course is no longer being maintained. We recommend the testing section of the Intermediate React, v2 course instead. We now recommend you take the Intermediate React, v2 course.
Table of Contents
Course OverviewKent C. Dodds introduces the course by reviewing the agenda, which includes using Jest and Cypress.
Testing FundamentalsKent discusses what a test is and reviews the different types of testing.
Writing a React Test & ExerciseKent introduces a simple React component test and exercise.
Writing a React Test SolutionKent walks through the solution to the simple react component test and discusses the considerations when testing a React component. Kent takes questions from students.
Configuring Jest & BabelAfter installing Jest and adding a test script, Kent makes the Babel configuration dynamic to transpile modules for the test.
Jest JSDOMKent shows that JSDOM is loaded by default in Jest. If not needed, the test environment can be configured to be Node instead.
CSS ImportsIf webpack loaders exist, Kent shows how to configure Jest to be able to load CSS files. Kent takes questions from students.
CSS ModulesKent shows how to use identity-obj-proxy to simulate CSS Module imports with Jest.
Handling Dynamic ImportsKent installs a babel plugin to transform dynamic imports to something that can be run in Node that Jest understands.
Adding Code Coverage ReportsAfter adding code coverage reporting with --coverage flag, Kent shows how to fine-tune coverage reporting only to include files desired and to set a threshold to acceptable levels of coverage.
Jest Watch ModeWhen configuring Jest watch mode, which allows runs tests related to only the files that have changed, Kent shows that watch mode also allows the running of all the tests matching a specific pattern by the file name or the test name. Kent takes questions from students.
Jest Config ReviewKent discusses the steps that occurred to configure Jest for a standard React application. Kent takes questions from students.
Unit Testing React Components
Course Project OverviewKent walks through the files to get set up for testing React components.
Unit Testing a React ComponentKent reviews unit testing a simple React form using raw DOM and React APIs.
Test a Form Component ExerciseKent introduces the exercise to for testing a simple React form.
Test a Form Component SolutionKent walks through solution to the Test Form Component Exercise for testing for the simple React form login component. Kent takes questions from students.
react-testing-libraryKent gives an overview of the philosophy and API of react-testing-library. Kent takes questions from students.
react-testing-library ExerciseIn this exercise, students use react-testing-library to render and simulate top-level methods and getByText and getByLabelText test selector methods.
react-testing-library SolutionKent walks through the solution to the react-testing-library Exercise. Kent takes questions from students.
Using DOM Events ExerciseIn this exercise, students use react-testing-library to render our React component into the document to use real events rather than simulated events in our tests.
Using DOM Events SolutionKent walks through the solution to Using Dom Events Exercise.
Component Testing Q&AKent answers questions from students about testing with setTimeout, checking state of components, broad vs. specific unit tests, and more.
Introducing Snapshot TestingKent introduces snapshot testing, which easily compares values of anything over time and keeps the tests updated. Kent takes questions from students.
Snapshot Testing ExerciseIn this exercise, students set up for snapshot serializers to include CSS in the snapshot.
Snapshot Testing SolutionKent walks through the solution for Snapshot Testing Exercise.
Snapshot Q&AKent takes questions about snapshot testing regarding what parts of the code are responsible for generating the snapshots, making sure tests are providing value, resetting snapshots, and more. Then Kent reviews how to write useful snapshot tests.
Integration Testing Pages
Integration Tests DemoKent reviews the course integration test demonstration for a registration form.
Integration Tests ExerciseAfter reviewing utility file for testing applications, Kent demonstrates setting up an integration test. In this exercise, students work on creating the login test.
Integration Tests SolutionKent walks through the solution for the Integration Tests Exercise. Kent answers questions from students.
Integration Testing Q&AKent answers questions from students about component testing and the ESLint plugin for Jest.
CypressAfter reviewing steps to configure and using Cypress, Kent shows how to automate the testing.
Cypress Q&AKent takes questions from students about installing extensions with Cypress and cross-browser support of Cypress.
Configuring Cypress ExerciseIn this exercise, students set up Cypress testing on the login form.
Configuring Cypress SolutionKent walks through the solution to the Configuring Cypress Exercise. Then Kent answers students' questions.