Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

React Testing with Jest and Enzyme

Kiểm thử React với Jest và Enzyme

Kiểm thử React với Jest và Enzyme

Nâng cao chất lượng code React, Redux, Hooks và Context bằng Phát triển Hướng Kiểm thử

4.3
(4,647 đánh giá)
29,381 học viên
Giảng viên
Bonnie Schulkin
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
15.0 giờ video
212 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

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

Viết các bài kiểm thử đơn vị, tích hợp và chức năng cho React, Hooks, Context và Redux sử dụng Jest và Enzyme
Hiểu được ưu nhược điểm của các phương pháp kiểm thử khác nhau và khi nào nên chọn phương pháp nào
Lập kế hoạch phát triển ứng dụng React hiệu quả hơn thông qua Phát triển Hướng Kiểm thử
Mock các phương thức và module để đảm bảo tính độc lập của các bài kiểm thử

Yêu cầu

Cần có kiến thức cơ bản về JavaScript và React

Đối tượng phù hợp

Dành cho lập trình viên web làm việc với các dự án React/Redux cũ sử dụng Enzyme để kiểm thử

Nội dung khóa học

17 phần • 208 bài giảng
1 VUI LÒNG ĐỌC: Quan điểm của tác giả về Enzyme và React 18
2 Chào mừng và Giới thiệu khóa học
3 TDD: Là gì và Tại sao
4 LƯU Ý QUAN TRỌNG: enzyme-adapter-react-17 chưa có sẵn
5 create-react-app
6 Bài học tiếp theo là tùy chọn
7 TÙY CHỌN: Cài đặt Jest mà không dùng create-react-app
8 Demo chế độ Jest Watch Mode
9 Tìm hiểu thêm về Jest Watch Mode, File kiểm thử và Tests
10 Enzyme vs. React Testing Library
11 Giới thiệu và Cài đặt Enzyme
12 Sử dụng Enzyme trong một bài kiểm thử
13 Các khẳng định (Assertions) trong Jest
14 Các loại kiểm thử
15 Đánh đổi trong kiểm thử
16 Tại sao khóa học này không có kiểm thử Snapshot
1 Kho lưu trữ khóa học trên GitHub
2 Demo và bắt đầu ứng dụng Click Counter
3 Thiết lập Enzyme và viết các bài kiểm thử
4 Thuộc tính data-test
5 Bài kiểm thử đầu tiên với thuộc tính data-test
6 TÙY CHỌN: Các cách loại bỏ thuộc tính data-test ngoài phương pháp "eject"
7 TÙY CHỌN: Xóa thuộc tính data-test cho môi trường production
8 Thêm các bài kiểm thử với thuộc tính data-test
9 Tái cấu trúc DRY
10 Chiến lược và quyết định thiết kế
11 Kiểm thử hiển thị ban đầu của bộ đếm
12 Kiểm thử nhấp nút
13 Kiểm thử chấp nhận và đánh giá
14 Thử thách với Click Counter
15 Mô tả các thử thách Click Counter
1 Demo ứng dụng Jotto
2 Lập kế hoạch cho ứng dụng Jotto
3 Kế hoạch triển khai ứng dụng Jotto
4 Thiết lập ứng dụng Jotto và Component Congrats
5 Thiết lập kiểm thử cho Component Congrats
6 Các bài kiểm thử Congrats và phương thức .text()
7 Viết code cho Component Congrats
8 Lưu ý về kiểm thử PropTypes
9 TÙY CHỌN: Kiểm thử PropTypes
10 TÙY CHỌN: Viết code PropTypes và cập nhật bài kiểm thử
11 TÙY CHỌN: Default Props trong setup()
12 Di chuyển cấu hình Enzyme sang setupTests.js
13 Tổng kết về các mức trừu tượng
14 Chiến lược lâu dài
1 Thiết lập Component GuessedWords và các bài kiểm thử
2 PropTypes và setup() cho GuessedWords
3 Sử dụng `describe` để nhóm ngữ cảnh
4 Viết bài kiểm thử và beforeEach cho trường hợp "chưa đoán từ nào"
5 Code cho trường hợp "chưa đoán từ nào"
6 Bài kiểm thử cho trường hợp "đã đoán một số từ"
7 Code cho trường hợp "đã đoán một số từ"
8 Kiểm thử chấp nhận thủ công
9 Tạo kiểu với Bootstrap
1 Câu đố code! Component Input cơ bản
2 Props của Component Input
3 TÙY CHỌN: Giới thiệu về React Hooks
4 Mock các phương thức React
5 Chuẩn bị Component Input cho các bài kiểm thử useState
6 Bài kiểm thử và code cho trường được kiểm soát bởi state
7 Các câu hỏi thường gặp về Mock phương thức React
8 Xóa trường được kiểm soát bởi state khi Submit
9 Kiểm thử render Input với `success` là `true` hoặc `false`
10 Hàm trợ giúp `getLetterMatchCount`
1 Giới thiệu kiểm thử chức năng và cập nhật Component App
2 Thiết lập kiểm thử chức năng
3 Bài kiểm thử chức năng đầu tiên: Submit Guess khi chưa có lần đoán nào
4 Câu đố code! Kiểm thử chức năng cho "Đã đoán một số từ" và "Đoán đúng"
5 Các phương thức Jest: .only(), .skip() và .todo()
1 Kế hoạch cho `secretWord`
2 `moxios`: Tại sao và như thế nào
3 Thiết lập Action `getSecretWord` và các bài kiểm thử
4 Kiểm thử các Action bất đồng bộ
5 Viết Action `getSecretWord`
6 Tổng kết về Action bất đồng bộ và Moxios
1 Mock module với Jest
2 Sử dụng useEffect để lấy Secret Word khi App mount
3 Mock module actions
4 Kiểm thử useEffect được gọi khi App mount, không gọi khi App update
5 Viết code useEffect để vượt qua các bài kiểm thử
6 Điểm lựa chọn: Redux hay React Context?
1 Lập kế hoạch Redux
2 Thiết lập Redux
3 Lập kế hoạch cho Success State
4 Action Creator `CORRECT_GUESS`
5 Bài kiểm thử `successReducer`
6 TÙY CHỌN: Giới thiệu Hook `useSelector`
7 Kiểm thử Redux State cho Component Input
8 Các lựa chọn để kiểm thử `useSelector`
9 Hàm trợ giúp kiểm thử `storeFactory`
10 Cập nhật hàm Setup để sử dụng Store Factory
11 Tổng kết: Giới thiệu kiểm thử Redux
1 Các phần State khác
2 Lập kế hoạch cho `guessedWords`
3 Redux Thunk: Là gì và Tại sao
4 Cài đặt Redux Thunk
5 Lập kế hoạch kiểm thử Thunk
6 Thiết lập bài kiểm thử `guessWords`
7 Bài kiểm thử Thunk đầu tiên
8 Thêm `secretWordReducer`
9 Các bài kiểm thử còn lại
10 Viết Reducer và Action Creator
11 Kế hoạch cho kiểm thử chức năng
12 Cập nhật các Component
13 Tổng kết kiểm thử Thunk
1 Kế hoạch cho `secretWord`
2 Cập nhật bài kiểm thử moxios cho Redux
3 Viết Action Creator và Reducer
4 Cập nhật App để sử dụng secretWord state: mock response và cài đặt Jest
5 Kiểm thử chấp nhận thủ công
6 Thử thách Jotto với Redux
1 Giới thiệu về React Context
2 Luồng dữ liệu Jotto với Context
3 Kế hoạch triển khai Context cho Jotto
4 Cập nhật bài kiểm thử `getSecretWord` cho triển khai Context
5 Cập nhật code `getSecretWord` cho triển khai Context
6 Giới thiệu Hook `useReducer`
7 Tái cấu trúc App State với Hook `useReducer`
8 Lập kế hoạch Loading Spinner và `describe.each()`
9 Kiểm thử và viết code Loading Spinner
1 Các triển khai Context trong khóa học này
2 Lập kế hoạch Language Context
3 Thiết lập file Strings
4 Bài kiểm thử Strings
5 Viết code getStringByLanguage
6 Cảnh báo về Strings
7 Component LanguagePicker: Lập kế hoạch và thiết lập
8 Bài kiểm thử LanguagePicker: Render và PropTypes
9 Icon cho LanguagePicker
10 Nhấp vào Icon LanguagePicker
11 File languageContext
12 Các lựa chọn kiểm thử Context
13 Thiết lập kiểm thử Language Context cho Congrats
14 Bài kiểm thử Language Context cho Congrats
15 Code Language Context cho Congrats
16 Câu đố code! Language Context cho Input
17 Sửa cảnh báo ngôn ngữ trong bài kiểm thử App
18 Bài kiểm thử Language Context cho GuessedWords: Mocking useContext
19 Code Language Context cho GuessedWords
20 Kiểm thử chấp nhận thủ công
1 Context với State nhúng
2 Viết code Success Context
3 Kiểm thử Success Context
4 Câu đố code! guessedWords Context
5 Thiết lập Component Congrats và App cho kiểm thử Success Context
6 Kiểm thử và viết code Congrats Success Context
7 Thiết lập Component GuessedWords cho kiểm thử Context
8 Kiểm thử và viết code GuessedWords Context trong Component GuessedWords
9 Đánh giá Context với State nhúng
10 Cập nhật thiết lập kiểm thử chức năng cho triển khai Context
11 Kiểm thử và viết code Input sử dụng Success Context
12 Kiểm thử và viết code Input thiết lập Success Context
13 Kiểm thử và viết code Input thiết lập GuessedWords Context
14 Sửa lỗi GuessedWords Provider trong Input.test.js
15 Kiểm thử chấp nhận thủ công
16 Thử thách Jotto với Hooks và Context
1 Tài nguyên khóa học
2 JSDoc
1 Giới thiệu về các bài học cũ này
2 Ôn tập kế hoạch Redux State cho Jotto
3 Thiết lập Redux
4 Lập kế hoạch Success State
5 Action creator `CORRECT_GUESS`
6 Bài kiểm thử `successReducer`
7 Code `successReducer`
8 Đánh đổi khi kiểm thử đơn vị Action Creators / Reducers
9 Thiết lập kiểm thử Connected Component
10 Tổ chức bài kiểm thử Component Input
11 Bắt đầu hàm setup cho Component Input
12 Hàm trợ giúp kiểm thử `storeFactory`
13 Phương thức `.dive()` của Enzyme
14 Tổng kết thiết lập Connected Component và các lựa chọn
15 Bài kiểm thử và code Input cho success=false
16 Câu đố! Viết bài kiểm thử và code Input cho success=true
17 Tổng kết Redux đơn giản
18 Các phần State khác
19 Lập kế hoạch cho `guessedWords`
20 Redux Thunk: Là gì và Tại sao cần dùng
21 Cài đặt Redux Thunk
22 Lập kế hoạch kiểm thử Thunk
23 Thiết lập kiểm thử `guessWords`
24 Bài kiểm thử Thunk đầu tiên
25 Thêm `secretWordReducer`
26 Các bài kiểm thử còn lại
27 Viết Reducer và Action Creator
28 Tổng kết kiểm thử tích hợp Thunk
29 Kế hoạch cho `secretWord`
30 `moxios`: Lý do và cách sử dụng
31 Thiết lập Action Creator `secretWord` và các bài kiểm thử
32 Kiểm thử Action Creator bất đồng bộ
33 Viết bài kiểm thử `getSecretWord`
34 Viết Action Creator và Reducer `secretWord`
35 Tổng kết: Action Creator bất đồng bộ và `moxios`
36 Kiểm thử Props và các lệnh gọi Action Creator
37 Kiểm thử Redux Props
38 Props Redux cho Input
39 Câu đố! Props Redux của App
40 TÙY CHỌN: Cấu hình Jest Setup cho dự án không dùng create-react-app
41 Cách tiếp cận kiểm thử lệnh gọi Action Creator
42 Lệnh gọi `getSecretWord` khi App được mount
43 Câu đố! Kiểm thử `guessWord` khi nhấn nút Submit của Input
44 Viết bài kiểm thử cho đối số `guessWord`
45 Viết lệnh gọi `guessWord` với đối số
46 Xóa nội dung Input khi Submit
47 Demo ứng dụng đã hoàn thành
48 Các thử thách Jotto
49 Mô tả thử thách Jotto
1 Mã giảm giá!

Giới thiệu khóa học

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.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Testing
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊