React Testing with Jest and Enzyme by Udemy
Improve your React, Redux, Hooks and Context Code with Test Driven Development
Course Highlights
- Write unit, integration and functional tests for React, Hooks, Contex 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.
- Mock methods and modules to keep your tests isolated.
Skills you will learn!
Curriculum
16 Topics
PLEASE READ: The Author's thoughts on Enzyme and React 18
Welcome and Introduction
TDD: What and Why
IMPORTANT NOTE: enzyme-adapter-react-17 not yet available
create-react-app
Next lecture is optional
OPTIONAL: Setting up Jest without create-react-app
Demo of Jest Watch Mode
More about Jest Watch Mode Test Files and Tests
Enzyme vs. React Testing Library
Enzyme Introduction and Setup
Using Enzyme in a Test
Jest Assertions
Types of Tests
Testing Tradeoffs
Why There is no Snapshot Testing in this Course
15 Topics
Course Repository on GitHub
Demo and Start Click Counter App
Set up Enzyme and Write Tests
data-test Attributes
First data-test Attribute Test
OPTIONAL: Ways to remove data-test attribute other than "eject"
OPTIONAL: Removing data-test Attributes for Production
More data-test Attribute Tests
DRY Refactor
Strategies and Design Decisions
Test Initial Counter Display
Test Button Click
Acceptance Testing and Review
Click Counter Challenges
Click Counter Challenge Descriptions
14 Topics
Jotto App Demo
Jotto App Planning
Jotto App Plan of Attack
Set up Jotto App and Congrats Component
Congrats Component Test Setup
Congrats Tests and the .text() Method
Code the Congrats Component
Notes about PropTypes Testing
OPTIONAL PropTypes Testing
OPTIONAL Code PropTypes and Update Tests
OPTIONAL Default Props in setup()
Move Enzyme Configuration to setupTests.js
Summary of Abstractions
Playing the Long Game
9 Topics
Set up GuessedWords Component and Tests
GuessedWords PropTypes and setup()
Use `describe` for Context
Write Tests and beforeEach for "no words guessed"
Code for "no words guessed"
Tests for "nonzero guessed words"
Code for "nonzero guessed words"
Manual Acceptance Testing
Bootstrap Styling
10 Topics
Code Quiz! Basic Input Component
Input Component Props
OPTIONAL: Introduction to React Hooks
Mocking React Methods
Prepare Input Component for useState Tests
State-Controlled Field Tests and Code
Common Questions about Mocking React Methods
Clearing State-Controlled Field on Submit
Testing Input Render for `success` as `true` or `false`
`getLetterMatchCount` Helper Function
5 Topics
Introduction to Functional Tests and update App Component
Set up Functional Tests
First Functional Test: Submit Guess with No Previous Guesses
Code Quiz! Functional Tests for "Some Words Guessed" and "Correct Guess"
Jest methods: .only() .skip() and .todo()
6 Topics
`secretWord` Plan
`moxios`: Why and How
Set up `getSecretWord` Action and Tests
Testing Async Actions
Write `getSecretWord` Action
Asynchronous Action and Moxios Summary
6 Topics
Mocking Modules with Jest
Using useEffect to Get Secret Word on App Mount
Mocking the actions Module
Testing that useEffect is Called on App Mount Not Called on App Update
Write useEffect Code to Pass Tests
Choice point: Redux or React Context?
11 Topics
Redux Planning
Set up Redux
Success State Planning
`CORRECT_GUESS` Action Creator
`successReducer` Test
OPTIONAL: Introduction to the `useSelector` Hook
Testing Redux State for Input Component
Choices for Testing `useSelector`
`storeFactory` Test Helper
Updating Setup Function to use Store Factory
Summary: Intro to Redux Testing
13 Topics
Other Pieces of State
`guessedWords` Planning
Redux Thunk: What and Why
Installing Redux Thunk
Thunk Test Planning
Set up `guessWords` Tests
First Thunk Test
Add `secretWordReducer`
Remaining Tests
Write Reducer and Action Creator
Plan for Functional Tests
Update Components
Thunk Testing Summary
6 Topics
`secretWord` Plan
Update moxios Tests for Redux
Write Action Creator and Reducer
Update App to use secretWord state: mock response and Jest settings
Manual Acceptance Testing
Jotto Challenges for Redux
9 Topics
Introduction to React Context
Jotto Data Flow with Context
Jotto Context Plan of Attack
Update `getSecretWord` Tests for Context Implementation
Update `getSecretWord` Code for Context Implementation
Intro to `useReducer` Hook
Refactor App State with `useReducer` Hook
Loading Spinner Planning and `describe.each()`
Test and Code Loading Spinner
20 Topics
Context Implementations in this Course
Language Context Planning
Strings File Setup
Strings Tests
Code getStringByLanguage
Strings Warnings
LanguagePicker Component: Planning and Setup
LanguagePicker Tests: Render and PropTypes
LanguagePicker Icons
LanguagePicker Icon Click
languageContext File
Context Test Options
Congrats Language Context Test Setup
Congrats Language Context Tests
Congrats Language Context Code
Code Quiz! Input Language Context
Fix App Test Language Warnings
GuessedWords Language Context Tests: Mocking useContext
GuessedWords Language Context Code
Manual Acceptance Testing
16 Topics
Context with Embedded State
Code Success Context
Test Success Context
Code Quiz! guessedWords Context
Set up Congrats and App Components for Success Context Testing
Test and Code Congrats Success Context
Set up GuessedWords Component for Context Testing
Test and Code GuessedWords Context in GuessedWords Component
Review of Context with Embedded State
Update Functional Test Setup for Context Implementation
Test and Code Input Consuming Success Context
Test and Code Input Setting Success Context
Test and Code Input Setting GuessedWords Context
Fix GuessedWords Provider Error in Input.test.js
Manual Acceptance Testing
Jotto Challenges for Hooks and Context
2 Topics
Course Resources
JSDoc
49 Topics
About these legacy lectures
Review of Jotto Redux State Plan
Set up Redux
Success State Planning
`CORRECT_GUESS` action creator
`successReducer` Tests
`successReducer` Code
Tradeoffs to Unit Testing Action Creators / Reducers
Set Up Connected Component Tests
Input Component Test Organization
Start setup Function for Input Component
`storeFactory` Test Helper
Enzyme `.dive()` method
Summary of Connected Component Setup and Choices
Input Tests and Code for success=false
Quiz! Write Input Tests and Code for success=true
Simple Redux Summary
Other Pieces of State
`guessedWords` Planning
Redux Thunk: What and Why
Installing Redux Thunk
Thunk Test Planning
Set up `guessWords` Tests
First Thunk Test
Add `secretWordReducer`
Remaining Tests
Write Reducer and Action Creator
Thunk Integration Testing Summary
`secretWord` Plan
`moxios`: Why and How
Set up `secretWord` Action Creator and Tests
Testing Asynchronous Action Creators
Write `getSecretWord` tests
Write `secretWord` Action Creator and Reducer
Summary: Asynchronous Action Creators and `moxios`
Testing Props and Action Creator Calls
Testing Redux Props
Input Redux Props
Quiz! App Redux Props
OPTIONAL: Configure Jest Setup for non-create-react-app
Approach to Testing Action Creator Calls
`getSecretWord` call on App Mount
Quiz! Tests for `guessWord` on Input Submit Click
Write test for `guessWord` Argument
Write `guessWord` Call with Argument
Clear Input Box on Submit
Demo of Completed App
Jotto Challenges
Jotto Challenge Descriptions
1 Topic
Coupons!
React Testing with Jest and Enzyme
Related React JS Courses
Thank You!
Your review has been submitted successfully.