React: Testing and Debugging

1h 18mIntermediate2020-07-20

Authors

Emmanuel Henri

Executive with 20+ years of experience in programming and design

Course details

Tracking down bugs in React—and the many different pieces it communicates with—can be a challenge. While basic JavaScript testing and debugging tools certainly work, solutions designed specifically to work with React will save you time and effort. This course covers those tools, as well as tips and techniques to help you find, diagnose, and fix problems in your apps. Watch and learn how to test React code with Jest, debug with Chrome, check type with flow, and optimize your code with ESLint. Instructor Emmanuel Henri has packaged this course with everything you need to get started, including exercise files and setup instructions, and concludes with some next steps for exploring advanced debugging in React.

Topics include:
Setting up for React testing and debugging
Testing with Jest
Snapshot testing
Debugging with Chrome and Chrome extensions
Optimizing React code with ESLINT
Type checking

Skills covered

React.jsMetaFront-End Web DevelopmentSoftware Development ToolsWeb DevelopmentSoftware DevelopmentDeep Dive (X:Y)

Concepts

0. Introduction

01 - Testing and debugging your React apps
02 - Course prerequesites

1. Setting Up

03 - Your test project
04 - An overview of your toolset
05 - React Developer Tools
06 - Jest introduction
07 - Type checking with flow
08 - Linting with ESLint

2. Testing with Jest

09 - Test numbers with matchers
10 - Test string with matchers
11 - Test arrays and objects with matchers
12 - Snapshot testing with Jest
13 - Organize your tests with describe()
14 - Code coverage reports

3. Debugging with Chrome and Extensions

15 - Debug with Chrome introduction
16 - Debug with React DevTools
17 - Test your network and performance
18 - Run an audit in Chrome
19 - Debug resources to find answers

4. ESLint and Types

20 - Code improvement with ESLint
21 - Type checking with Flow

Conclusion

22 - Next steps