This course is no longer being maintained. We recommend the testing section of the Intermediate React course instead. We now recommend you take the Intermediate React, v5 course.
Table of Contents
Introduction
Course Overview
Kent C. Dodds introduces the course by reviewing the agenda, which includes using Jest and Cypress. The recommended version of Node for this course is 8.17.0.
Testing Fundamentals
Kent discusses what a test is and reviews the different types of testing.
Writing a React Test & Exercise
Kent introduces a simple React component test and exercise.
Writing a React Test Solution
Kent walks through the solution to the simple react component test and discusses the considerations when testing a React component. Kent takes questions from students.
Test Configurations
Configuring Jest & Babel
After installing Jest and adding a test script, Kent makes the Babel configuration dynamic to transpile modules for the test.
Jest JSDOM
Kent shows that JSDOM is loaded by default in Jest. If not needed, the test environment can be configured to be Node instead.
CSS Imports
If webpack loaders exist, Kent shows how to configure Jest to be able to load CSS files. Kent takes questions from students.
CSS Modules
Kent shows how to use identity-obj-proxy to simulate CSS Module imports with Jest.
Handling Dynamic Imports
Kent installs a babel plugin to transform dynamic imports to something that can be run in Node that Jest understands.
Adding Code Coverage Reports
After 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 Mode
When 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 Review
Kent discusses the steps that occurred to configure Jest for a standard React application. Kent takes questions from students.
Unit Testing React Components
Course Project Overview
Kent walks through the files to get set up for testing React components.
Unit Testing a React Component
Kent reviews unit testing a simple React form using raw DOM and React APIs.
Test a Form Component Exercise
Kent introduces the exercise to for testing a simple React form.
Test a Form Component Solution
Kent walks through solution to the Test Form Component Exercise for testing for the simple React form login component. Kent takes questions from students.
Enzyme Limitations
Kent discusses the limitations of Enzyme, the JavaScript testing utility for React, and shallow rendering. Kent takes questions from students.
react-testing-library
Kent gives an overview of the philosophy and API of react-testing-library. Kent takes questions from students.
react-testing-library Exercise
In this exercise, students use react-testing-library to render and simulate top-level methods and getByText and getByLabelText test selector methods.
react-testing-library Solution
Kent walks through the solution to the react-testing-library Exercise. Kent takes questions from students.
Using DOM Events Exercise
In 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 Solution
Kent walks through the solution to Using Dom Events Exercise.
Component Testing Q&A
Kent answers questions from students about testing with setTimeout, checking state of components, broad vs. specific unit tests, and more.
Snapshot Testing
Introducing Snapshot Testing
Kent introduces snapshot testing, which easily compares values of anything over time and keeps the tests updated. Kent takes questions from students.
Snapshot Testing Exercise
In this exercise, students set up for snapshot serializers to include CSS in the snapshot.
Snapshot Testing Solution
Kent walks through the solution for Snapshot Testing Exercise.
Snapshot Q&A
Kent 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 Demo
Kent reviews the course integration test demonstration for a registration form.
Integration Tests Exercise
After 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 Solution
Kent walks through the solution for the Integration Tests Exercise. Kent answers questions from students.
Integration Testing Q&A
Kent answers questions from students about component testing and the ESLint plugin for Jest.
Configuring Cypress
Cypress
After reviewing steps to configure and using Cypress, Kent shows how to automate the testing.
Cypress Q&A
Kent takes questions from students about installing extensions with Cypress and cross-browser support of Cypress.
Configuring Cypress Exercise
In this exercise, students set up Cypress testing on the login form.
Configuring Cypress Solution
Kent walks through the solution to the Configuring Cypress Exercise. Then Kent answers students' questions.
