4.50 (3489 reviews)
☑ 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.
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.
Introduction to Jest, Enzyme and TDD
Welcome and Introduction
Versions used in this course
TDD: What and Why
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
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
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
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
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
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
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
Redux Thunk: What and Why
Installing Redux Thunk
Thunk Test Planning
Set up `guessWords` Tests
First Thunk Test
Write Reducer and Action Creator
Thunk Integration Testing Summary
`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
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 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
Testing React Hooks
Prepare Input for Writing setState Tests
Clear currentGuess on Submit
Plan for Testing 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
Context Implementations in this Course
Language Context Planning
Strings File Setup
LanguagePicker Component: Planning and Setup
LanguagePicker Tests: Render and PropTypes
LanguagePicker Icon Click
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
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.
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!
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!
Best course for the beginners..She explained all the topics very clearly.The lectures are very clear and well organized.
? 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.
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..
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.
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.
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
I would prefer if Visual Studio Code was used. I would appeciate a PDF with guidance and shortcuts to accompany the videos.
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.
Bonnie is an excellent instructor! The course really helped me understand TDD in practice along with learning more about the React development ecosystem.
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
It was an extremely helpful and informative course. It helped to get a good idea of experiencing TDD using Jest & Enzyme.
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!!