Mô tả

Please read the first lecture (reproduced at the end of this course description) before deciding to purchase this course.

In short, Enzyme is no longer actively supported. Unless you're interested in learning Enzyme specifically (because you're working on a legacy React project that uses Enzyme tests), I recommend taking a React Testing Library course instead.

**************************************************************************************************************

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.

**************************************************************************************************************

**************************************************************************************************************

This lecture/article is reproduced here, since Udemy articles do not preview well. Unfortunately, you will not get the full experience, as links are not available in the course description.

First lecture / article: The Author's Thoughts on Enzyme and React 18

The stark reality: Enzyme is not compatible with React 18, and probably never will be.

The History

I started writing this course in March 2018, and it was published in May 2018. At that time, Enzyme was the primary option for testing React components with Jest. React Testing Library (Enzyme's current prime competitor) had just been released in March 2018.

Since that time, a few things have happened: 

  • In June 2020, Enzyme switched from being maintained by Airbnb to being maintained by an individual.

  • In October 2020, React 17 was released.

  • Also in October 2020, an unofficial Enzyme adapter for React 17 was released.

  • In December 2021, the author of the unofficial adapter for React 17 wrote an article entitled Enzyme is Dead, where he stated that he would not be writing an adapter for React 18.

  • In March 2022, React 18 was released.

  • In April 2022, the Enzyme maintainer has stated that he will work on a React 17 adapter before a React 18 adapter.

  • As of April 2022, the official adapter for React 17 has not been released.


Why I currently recommend React Testing Library

React Testing Library and Enzyme do the same job: rendering components so that they can be tested with Jest. I recommend React Testing Library over Enzyme for these reasons:

  1. Unlike Enzyme, React Testing Library does not rely on React internals. This means React Testing Library does not have an adapter that needs to be updated with each release of React, and is far less likely to have issues with new React versions.

  2. I find React Testing Library to be easier to use than Enzyme.


What all this means for this course

Now that React 18 has come out and there's no React 17 adapter in sight, I don't believe there's a future for Enzyme. I would not recommend this course for people who are looking to learn how to test new React applications. Instead I would recommend you find a course on React Testing Library.

That said, there are still around 2.4 million downloads of Enzyme a week (as of April 2022). Here are the circumstances under which I would recommend learning Enzyme: 

  1. You are working on a legacy project that already has a large suite of Enzyme tests, and the project never intends to upgrade to React 18.

  2. You are working on a project with a large suite of existing Enzyme tests, and you wish to understand these tests before migrating to React Testing Library (RTL). However, Wojciech Maj, the author of the unoffiical Enzyme adapter for React 17, suggests: 

While Migrate from Enzyme support article is available, I suggest you to just start fresh, forgetting that Enzyme has ever existed. RTL is by no means an Enzyme drop-in replacement, so having a completely fresh mindset will help you getting the most of it.


The Bottom Line

Enzyme was a great way to test React applications when this course came out; however, I can no longer recommend it. I encourage you to study React Testing Library instead.

Bạn sẽ học được gì

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.

Yêu cầu

  • Basic Familiarity with JavaScript and React

Nội dung khoá học

17 sections

Introduction to Jest, Enzyme and TDD

16 lectures
PLEASE READ: The Author's thoughts on Enzyme and React 18
02:11
Welcome and Introduction
03:22
TDD: What and Why
03:44
create-react-app
03:05
Next lecture is optional
00:13
OPTIONAL: Setting up Jest without create-react-app
07:46
Demo of Jest Watch Mode
04:00
More about Jest Watch Mode, Test Files and Tests
05:40
Enzyme vs. React Testing Library
06:52
IMPORTANT NOTE: enzyme-adapter-react-17 not yet available
00:28
Enzyme Introduction and Setup
04:26
Using Enzyme in a Test
03:34
Jest Assertions
04:00
Types of Tests
03:00
Testing Tradeoffs
06:58
Why There is no Snapshot Testing in this Course
03:10

Simple React App: Click Counter

15 lectures
Course Repository on GitHub
00:06
Demo and Start Click Counter App
02:52
Set up Enzyme and Write Tests
05:55
data-test Attributes
06:01
First data-test Attribute Test
04:02
OPTIONAL: Ways to remove data-test attribute other than "eject"
00:43
OPTIONAL: Removing data-test Attributes for Production
08:44
More data-test Attribute Tests
04:09
DRY Refactor
06:50
Strategies and Design Decisions
05:11
Test Initial Counter Display
06:40
Test Button Click
05:40
Acceptance Testing and Review
03:05
Click Counter Challenges
02:19
Click Counter Challenge Descriptions
00:17

Jotto Intro and Congrats Component

14 lectures
Jotto App Demo
01:49
Jotto App Planning
04:17
Jotto App Plan of Attack
03:36
Set up Jotto App and Congrats Component
07:22
Congrats Component Test Setup
07:25
Congrats Tests and the .text() Method
05:43
Code the Congrats Component
03:17
Notes about PropTypes Testing
00:23
OPTIONAL PropTypes Testing
10:38
OPTIONAL Code PropTypes and Update Tests
03:41
OPTIONAL Default Props in setup()
02:29
Move Enzyme Configuration to setupTests.js
02:14
Summary of Abstractions
02:08
Playing the Long Game
02:18

GuessedWords Component

9 lectures
Set up GuessedWords Component and Tests
04:06
GuessedWords PropTypes and setup()
07:38
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:06
Bootstrap Styling
04:10

Input Component: useState and state-controlled input field

10 lectures
Code Quiz! Basic Input Component
02:30
Input Component Props
04:44
OPTIONAL: Introduction to React Hooks
04:28
Mocking React Methods
04:02
Prepare Input Component for useState Tests
05:11
State-Controlled Field Tests and Code
07:27
Common Questions about Mocking React Methods
06:21
Clearing State-Controlled Field on Submit
08:24
Testing Input Render for `success` as `true` or `false`
08:29
`getLetterMatchCount` Helper Function
08:36

Functional Tests

5 lectures
Introduction to Functional Tests, and update App Component
04:49
Set up Functional Tests
08:43
First Functional Test: Submit Guess with No Previous Guesses
07:23
Code Quiz! Functional Tests for "Some Words Guessed" and "Correct Guess"
06:28
Jest methods: .only() .skip() and .todo()
05:13

Testing Axios

6 lectures
`secretWord` Plan
01:49
`moxios`: Why and How
03:32
Set up `getSecretWord` Action and Tests
04:10
Testing Async Actions
02:37
Write `getSecretWord` Action
05:00
Asynchronous Action and Moxios Summary
02:02

Get Secret Word on App Mount: Mocking Modules and Testing `useEffect`

6 lectures
Mocking Modules with Jest
05:58
Using useEffect to Get Secret Word on App Mount
04:43
Mocking the actions Module
05:30
Testing that useEffect is Called on App Mount, Not Called on App Update
05:52
Write useEffect Code to Pass Tests
02:01
Choice point: Redux or React Context?
04:43

Intro to Testing Redux: Success State and Store Factory

11 lectures
Redux Planning
04:56
Set up Redux
05:36
Success State Planning
01:00
`CORRECT_GUESS` Action Creator
07:05
`successReducer` Test
06:52
OPTIONAL: Introduction to the `useSelector` Hook
02:31
Testing Redux State for Input Component
03:48
Choices for Testing `useSelector`
05:45
`storeFactory` Test Helper
03:54
Updating Setup Function to use Store Factory
04:05
Summary: Intro to Redux Testing
03:28

Testing Redux Thunk

13 lectures
Other Pieces of State
01:00
`guessedWords` Planning
03:13
Redux Thunk: What and Why
01:24
Installing Redux Thunk
03:35
Thunk Test Planning
02:32
Set up `guessWords` Tests
08:49
First Thunk Test
05:47
Add `secretWordReducer`
02:08
Remaining Tests
07:13
Write Reducer and Action Creator
06:52
Plan for Functional Tests
05:10
Update Components
04:01
Thunk Testing Summary
01:37

Update `getSecretWord` and `useEffect` for Redux

6 lectures
`secretWord` Plan
01:52
Update moxios Tests for Redux
02:45
Write Action Creator and Reducer
04:04
Update App to use secretWord state: mock response and Jest settings
04:48
Manual Acceptance Testing
02:05
Jotto Challenges for Redux
05:43

React Context Testing Introduction and Update `getSecretWord`

9 lectures
Introduction to React Context
02:15
Jotto Data Flow with Context
05:04
Jotto Context Plan of Attack
02:13
Update `getSecretWord` Tests for Context Implementation
05:23
Update `getSecretWord` Code for Context Implementation
01:13
Intro to `useReducer` Hook
06:08
Refactor App State with `useReducer` Hook
08:39
Loading Spinner Planning and `describe.each()`
06:15
Test and Code Loading Spinner
12:03

Simple Context: Language Picker

20 lectures
Context Implementations in this Course
03:30
Language Context Planning
04:31
Strings File Setup
05:38
Strings Tests
04:35
Code getStringByLanguage
02:09
Strings Warnings
07:13
LanguagePicker Component: Planning and Setup
04:47
LanguagePicker Tests: Render and PropTypes
04:43
LanguagePicker Icons
04:28
LanguagePicker Icon Click
02:07
languageContext File
06:25
Context Test Options
06:23
Congrats Language Context Test Setup
06:15
Congrats Language Context Tests
03:34
Congrats Language Context Code
02:30
Code Quiz! Input Language Context
07:38
Fix App Test Language Warnings
02:40
GuessedWords Language Context Tests: Mocking useContext
08:28
GuessedWords Language Context Code
03:09
Manual Acceptance Testing
01:16

Context with Embedded State

16 lectures
Context with Embedded State
03:20
Code Success Context
06:07
Test Success Context
08:21
Code Quiz! guessedWords Context
03:29
Set up Congrats and App Components for Success Context Testing
03:56
Test and Code Congrats Success Context
06:20
Set up GuessedWords Component for Context Testing
03:53
Test and Code GuessedWords Context in GuessedWords Component
09:30
Review of Context with Embedded State
04:12
Update Functional Test Setup for Context Implementation
06:38
Test and Code Input Consuming Success Context
05:23
Test and Code Input Setting Success Context
02:27
Test and Code Input Setting GuessedWords Context
04:54
Fix GuessedWords Provider Error in Input.test.js
01:47
Manual Acceptance Testing
02:13
Jotto Challenges for Hooks and Context
00:16

Resources

2 lectures
Course Resources
00:27
JSDoc
00:36

LEGACY -- NOT MAINTAINED Redux Class-Based, Connected Components

49 lectures
About these legacy lectures
00:12
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
Other Pieces of State
01:22
`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
`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
Testing Props and Action Creator Calls
01:26
Testing Redux Props
01:59
Input Redux Props
07:38
Quiz! App Redux Props
06:40
OPTIONAL: Configure Jest Setup for non-create-react-app
01:52
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:18

Bonus

1 lectures
Coupons!
00:16

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.