Introduction to Jest, Enzyme and TDD
  • Welcome and Introduction
  • TDD: What and Why
  • 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
  • IMPORTANT NOTE: enzyme-adapter-react-17 not yet available
  • 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
Simple React App: Click Counter
  • 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: 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
Jotto Intro and Congrats Component
  • 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
GuessedWords Component
  • 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
Input Component: useState and state-controlled input field
  • 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
Functional Tests
  • 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()
Testing Axios
  • `secretWord` Plan
  • `moxios`: Why and How
  • Set up `getSecretWord` Action and Tests
  • Testing Async Actions
  • Write `getSecretWord` Action
  • Asynchronous Action and Moxios Summary
Get Secret Word on App Mount: Mocking Modules and Testing `useEffect`
  • 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?
Intro to Testing Redux: Success State and Store Factory
  • 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
Testing Redux Thunk