Udemy

Platform

English

Language

Other

Category

2021 Update! React Testing with Jest and Enzyme

Improve your React, Redux, Hooks and Context Code with Test Driven Development

4.50 (3489 reviews)

Students

15 hours

Content

Aug 2021

Last Update
Regular Price


What you will learn

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.


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:

  • React hooks, including useEffect, useState and useReducer

  • Asynchronous functions using Axios

  • Redux action creators and reducers

  • Complex Redux action creators that use Redux Thunk

  • React context, including context with embedded state

You will also learn how to make the most of Jest capabilities, including

  • Mocking and restoring individual properties of modules

  • Mocking entire modules

  • Controlling which tests run using, .skip, and .only

  • Running test suites multiple times with different data, using .each

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!

Unit tests and Functional Tests

This course focuses on unit tests. Unit tests are tightly coupled to specific areas of code, which leads to easy diagnosis of failures, and a great match for Test-Driven Development. The course also teaches functional tests, which are modeled on user flows (and resulting behavior from the user perspective). Functional tests are not connected to code, which makes them more difficult to diagnose, but more resilient to code refactors.

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, Redux and Context 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.


Screenshots

2021 Update! React Testing with Jest and Enzyme
2021 Update! React Testing with Jest and Enzyme
2021 Update! React Testing with Jest and Enzyme
2021 Update! React Testing with Jest and Enzyme

Content

Introduction to Jest, Enzyme and TDD

Welcome and Introduction

Versions used in this course

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 Introduction and Setup

Using Enzyme in a Test

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

Test Component Rendering

OPTIONAL: Removing data-test Attributes for Production

More data-test Attribute Tests

DRY Refactor

Test Initial State

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

PropTypes Testing

Code PropTypes and Update Tests

Default Props in setup()

Move Enzyme Configuration to setupTests.js

OPTIONAL: Configure Jest Setup for non-create-react-app

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

getLetterMatchCount Helper Function

Choice point: Redux or Hooks/Context?

Simple Redux: success Piece of State

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

Testing Redux Thunk

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

Testing Axios

`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`

Redux Components

Testing Props and Action Creator Calls

Testing Redux Props

Input Redux Props

Quiz! App Redux Props

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

Hooks and Context Intro

Introduction to Hooks

Introduction to Context

Setting up Jotto for Hooks and Context

Jotto Data Flow with Hooks and Context

Jotto Hooks and Context Plan of Attack

Basic App Component

Code Quiz! Basic Input Component

Input Props

Jest Mocks

Testing React Hooks

Prepare Input for Writing setState Tests

State-Controlled Field

Clear currentGuess on Submit

Plan for Testing getSecretWord

Test getSecretWord

Code getSecretWord

Intro to useEffect and How to Test with Enzyme

Test getSecretWord is called on App Mount

useReducer Hook: What and Why

Code useEffect and useReducer to Pass Tests

Test getSecretWord Does NOT Run on App Update

secretWord Prop Warning for Input

Loading Spinner Planning

Test Loading Spinner

Code Loading Spinner

Simple Context

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

Context with Embedded State

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

Test and Code Input Consuming Success Context

Set up Tests for Input Setting Success Context

Simulating a Guess

Code and Test Input Setting Success Context

Set Up Test for Input Setting GuessedWords Context

Test Input Setting GuessedWords Context

Code Quiz! Empty GuessedWords Context

Code GuessedWords Context in Input and GuessedWords Components

Manual Acceptance Testing

Jotto Challenges for Hooks and Context

Resources

Course Resources

JSDoc


Reviews

S
Satyajit6 October 2020

Phew! That was a really nice way to finally wrap my head around unit testing in React. Thanks to Bonnie Schulkin's amazing course on React Unit Testing using Jest and Enzyme. This Udemy tutorial cleared a lot of confusions in my head which were stuck for a very long time from Angular-Jasmine world, like Spying and Mocking. Bonnie is a great instructor with her crisp and to-the-point explanations of concepts in React and how to unit test them. She teaches a lot of good coding design patterns through the series. Definitely, a must recommend for all the React beginners.

H
Hayder4 October 2020

Not recommended. This course has a lot of repetitive content and promotes bad practices by encourage testing the implementation details of the components instead of testing its desired behavior. Also, I couldn't find any major best practice recommendations except of very primitive and obvious ones. I want a refund!

M
Michael22 September 2020

This course has blown my mind. It's left me stuck at points and given me so many 'Aha!' moments that I've lost track. I've worked with jest before, but this enzyme course truly does take testing to a new level for me. I'm still working through the course and coding along while enjoying every second. Good job!

D
Deekshith21 September 2020

Best course for the beginners..She explained all the topics very clearly.The lectures are very clear and well organized.

J
Julien17 September 2020

? I like the teacher's style. ? She speaks very clearly, so the course is easy to understand, even at higher speeds. ? The included option drinking game is a nice little touch. ⌚ There is a lot of content, showing alternatives to solve the same problem.

M
María27 February 2020

It asks to use an element not explained (atom). It's not explained what it is before asking you to call it from console (atom .) inside the project. I did so, received a linux line from the console indicating how to install it and trusting the course i followed it... broke my system by the way. I may have to rebuild my entire work environment because of some problem with .atom's snapshot making it crash. By now I'll try to go on with my nephew's laptop, still no fun for starters :-) Also for what I was able to see before my screen to reboot and crash is that atom seems just a text editor. I think it would be easy to say "open your preferred code editor", for example, avoiding such problems..

O
Osmar25 February 2020

Very generalistic course. Just go find for Kent C. Dodds testing course, blog post and videos to combine with this course. She just missed this and Graphql (she just goes around the Redux). Very great course because has the right price tag.

B
Brian20 February 2020

This has been great and incredibly informative. The only downside so far is that we have not been using modern redux syntax with the useSelector and useDispatch hooks. My company does not use class-based components at all. So I will be interested to see whether the context/hooks section sheds light on how to test redux using modern hooks syntax.

J
Juanma31 January 2020

It was a really good course. Bonnie covered a lot of things related to how to test an app. Personally, I would have preferred to see more testing related to API requests and how to test them using fetch instead of axios and moxios. Regards

J
Jayne28 January 2020

I would prefer if Visual Studio Code was used. I would appeciate a PDF with guidance and shortcuts to accompany the videos.

E
Emilio24 January 2020

So far, loving it. My only comment is that maybe Bonnie should probably avoid drinking before the lessons rather than suggesting a drinking game for us LOL Just kidding, best react testing material I've found so far.

J
Jack22 January 2020

Bonnie is an excellent instructor! The course really helped me understand TDD in practice along with learning more about the React development ecosystem.

R
Ruth19 January 2020

Really well thought out and structured and so well explained. I loved the code plans at the beginning of the sections as they really helped set the scene and were great for referring back to as coding progressed. It's been so satisfying taking what was covered into the course and using it in my day job. It's also great to see that the course has been updated to ensure it stays relevant. Can't recommend it enough

S
Shaheen18 January 2020

It was an extremely helpful and informative course. It helped to get a good idea of experiencing TDD using Jest & Enzyme.

T
Tisha14 January 2020

What a fantastic course! Testing has long been lacking in my coding and I can't wait to implement all I have learned in my future projects. Thank you Bonnie!!


1719174

Udemy ID

5/28/2018

Course created date

9/19/2019

Course Indexed date
Bot
Course Submitted by