React Testing with Jest and Enzyme
4.4 (2,069 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
11,372 students enrolled

React Testing with Jest and Enzyme

Improve your React, Redux, Hooks and Context Code with Test Driven Development
Bestseller
4.4 (2,069 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
11,372 students enrolled
Created by Bonnie Schulkin
Last updated 6/2020
English
English [Auto]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 12 hours on-demand video
  • 10 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Write unit and integration tests for React and Redux using Jest and Enzyme.
  • Know the tradeoffs for different testing approaches and when to choose which approach.
  • Plan your React app more effectively via Test Driven Development.
Requirements
  • Be familiar with JavaScript and React / Redux (Redux is optional and used only in the second half of the course)
Description

Take your React code to the next level by learning Test Driven Development (TDD) with Jest and Enzyme! Jest is a powerful, flexible testing framework, and Enzyme provides tools to test React and Redux applications. In this course, you will learn to test:

  • Connected and unconnected components

  • Component state and Redux state

  • Action creators and reducers

  • Complex action creators that use Redux Thunk and Axios

  • Action creators called from connected components

  • React hooks, including useEffect, useState and useReducer

  • React context, including context with embedded state

  • Using Jest mock functions to spy on methods, control their return values or simply prevent them from running during the test

Please Note: This course does not cover Jest snapshots, as they are not compatible with the TDD mode of testing.

Why Learn to Test?

Test Driven Development will help you write better organized code that’s easier to maintain, which will save you time in the long run. Your tests provide value to your software development team, since others know they can rely on your code. Employers want developers with testing skills!

Learn the Reasons behind the Syntax

This course discusses tradeoffs when considering different approaches to testing, leaving you confident in the testing choices you make. Furthermore, you will deepen your understanding of React and Redux as we dig into how and why we test each aspect.

Practice your New Skills

You will also have opportunities to practice what you’ve learned. There are occasional “quizzes” while we’re building the course projects, where you can apply what you learned, and then watch a video to see the solution. There are also two sets of challenges to extend the course projects, with solutions on GitHub. 

Who this course is for:
  • Programmers interested in improving their React apps with testing
Course content
Expand all 162 lectures 11:51:21
+ Introduction to Jest, Enzyme and TDD
13 lectures 48:16
Versions used in this course
00:09

TDD stands for Test-Driven Development, which means writing tests before you write functioning code. This approach leads to code that is better organized, and also makes it possible to re-test every aspect of your code without any extra effort whenever you make code changes.

Preview 03:44
Next lecture is optional
00:13
OPTIONAL: Setting up Jest without create-react-app
03:17
Demo of Jest Watch Mode
04:00
More about Jest Watch Mode, Test Files and Tests
05:45
Enzyme Introduction and Setup
06:43
Using Enzyme in a Test
05:59
Types of Tests
01:39
Testing Tradeoffs
07:07
Why There is no Snapshot Testing in this Course
02:41
+ Simple React App: Click Counter
12 lectures 50:52
Course Repository on GitHub
00:06
Demo and Start Click Counter App
02:31
Set up Enzyme and Write Tests
05:31
Test Component Rendering
07:38
OPTIONAL: Removing data-test Attributes for Production
08:44
More data-test Attribute Tests
02:54
DRY Refactor
08:07
Test Initial State
03:39
Test Button Click
06:59
Acceptance Testing and Review
02:07
Click Counter Challenges
02:19
Click Counter Challenge Descriptions
00:17
+ Jotto Intro and Congrats Component
14 lectures 57:47
Jotto App Demo
01:49
Jotto App Planning
04:17
Jotto App Plan of Attack
02:38
Set up Jotto App and Congrats Component
07:11
Congrats Component Test Setup
06:55
Congrats Tests and the .text() Method
05:43
Code the Congrats Component
03:17
PropTypes Testing
09:52
Code PropTypes and Update Tests
03:41
Default Props in setup()
02:29
Move Enzyme Configuration to setupTests.js
03:37
OPTIONAL: Configure Jest Setup for non-create-react-app
01:52
Summary of Abstractions
02:08
Playing the Long Game
02:18
+ GuessedWords Component
11 lectures 49:51
Set up GuessedWords Component and Tests
04:01
GuessedWords PropTypes and setup()
08:18
Use `describe` for Context
01:51
Write Tests and beforeEach for "no words guessed"
04:56
Code for "no words guessed"
03:12
Tests for "nonzero guessed words"
06:22
Code for "nonzero guessed words"
05:15
Manual Acceptance Testing
03:44
Bootstrap Styling
03:49
getLetterMatchCount Helper Function
08:10
Choice point: Redux or Hooks/Context?
00:13
+ Simple Redux: success Piece of State
16 lectures 01:03:50
Review of Jotto Redux State Plan
04:56
Set up Redux
05:46
Success State Planning
01:00
`CORRECT_GUESS` action creator
07:33
`successReducer` Tests
07:18
`successReducer` Code
03:13
Tradeoffs to Unit Testing Action Creators / Reducers
01:51
Set Up Connected Component Tests
04:32
Input Component Test Organization
02:27
Start setup Function for Input Component
03:06
`storeFactory` Test Helper
02:46
Enzyme `.dive()` method
04:05
Summary of Connected Component Setup and Choices
04:21
Input Tests and Code for success=false
07:09
Quiz! Write Input Tests and Code for success=true
02:44
Simple Redux Summary
01:03
+ Testing Redux Thunk
11 lectures 45:27
Other Pieces of State
01:00
`guessedWords` Planning
03:13
Redux Thunk: What and Why
01:24
Installing Redux Thunk
04:30
Thunk Test Planning
02:32
Set up `guessWords` Tests
09:05
First Thunk Test
05:54
Add `secretWordReducer`
02:05
Remaining Tests
07:53
Write Reducer and Action Creator
07:14
Thunk Integration Testing Summary
00:37
+ Testing Axios
7 lectures 27:35
`secretWord` Plan
02:21
`moxios`: Why and How
03:32
Set up `secretWord` Action Creator and Tests
05:26
Testing Asynchronous Action Creators
03:31
Write `getSecretWord` tests
05:09
Write `secretWord` Action Creator and Reducer
04:51
Summary: Asynchronous Action Creators and `moxios`
02:45
+ Redux Components
13 lectures 01:05:00
Testing Props and Action Creator Calls
01:26
Testing Redux Props
01:59
Input Redux Props
07:38
Quiz! App Redux Props
06:40
Approach to Testing Action Creator Calls
02:50
`getSecretWord` call on App Mount
10:41
Quiz! Tests for `guessWord` on Input Submit Click
05:52
Write test for `guessWord` Argument
09:35
Write `guessWord` Call with Argument
06:26
Clear Input Box on Submit
02:37
Demo of Completed App
02:08
Jotto Challenges
05:52
Jotto Challenge Descriptions
01:16
+ Hooks and Context Intro
9 lectures 33:14
Introduction to Hooks
04:01
Introduction to Context
05:08
Setting up Jotto for Hooks and Context
00:40
Jotto Data Flow with Hooks and Context
05:08
Jotto Hooks and Context Plan of Attack
01:46
Basic App Component
05:01
Code Quiz! Basic Input Component
02:27
Input Props
03:58
Jest Mocks
05:05
+ Testing React Hooks
15 lectures 01:23:31
Prepare Input for Writing setState Tests
05:57
State-Controlled Field
07:17
Clear currentGuess on Submit
07:00
Plan for Testing getSecretWord
02:24
Test getSecretWord
08:56
Code getSecretWord
01:32
Intro to useEffect and How to Test with Enzyme
04:46
Test getSecretWord is called on App Mount
05:23
useReducer Hook: What and Why
06:10
Code useEffect and useReducer to Pass Tests
09:35
Test getSecretWord Does NOT Run on App Update
05:08
secretWord Prop Warning for Input
03:03
Loading Spinner Planning
01:56
Test Loading Spinner
11:08
Code Loading Spinner
03:16