Mô tả

Major course updates in November 2023! 

  • Projects are written in Vite, a lightweight and lightning-fast base for React apps

  • Projects use Vitest, a test framework that's much faster than Jest
    Note: Vitest code syntax is identical to Jest; all code presented in the course works with both Vitest and Jest.

  • The course presents Mock Service Worker v2 syntax, which was released in October 2023.


React Testing Library has become an extremely popular option for testing React, and with good reason! This detailed, comprehensive course provides a solid foundation for React app tests.


Best Practices

React Testing Library is famously opinionated about testing best practices, and is written to encourage these best practices. This course teaches:

  • testing behavior over testing implementation

  • tests that interact with your app the way a user would

  • finding elements by accessibility handles, to make sure your code is accessible as possible

Broad range of testing examples

The course apps start very with very simple examples (clicking a button to change its color) and work up to progressively more complicated testing concepts, such as: 

  • testing asynchronous page changes

  • simulating data from a server using Mock Service Worker

  • applying a context provider to a component when rendering

The course builds up to complex concepts gradually, in a way designed to support your learning and ensure your success.

Practice your new skills

You will also have plenty of opportunities to practice what you’ve learned. The course provides "code quizzes" while building the course projects, where you can apply what you learned and then watch a video to see the solution. The (optional) final section provides even more exercises to complete the second app and reinforce concepts from the course.

Optional React lectures

Any significant React code covered in the course is isolated into separate lectures. Students have a choice: those who want to reinforce their React skills (or learn new ones!) can watch those lectures, while students who feel confident in their React skills can skip them.

Supportive Instructor

The instructor has a proven track record of responding to course Q&A in a helpful and supportive way. She loves to engage with students, answer questions about course concepts, and help debug students' code for the course projects.

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

Yêu cầu

Nội dung khoá học

9 sections

Introduction

11 lectures
Introduction to React Testing Library and Jest / Vitest
04:26
Link to course GitHub repo
00:03
First Test with Testing Library
08:09
Jest and Jest-DOM Assertions
04:09
Jest and Vitest: How Tests Work
06:03
TDD: Test Driven Development
03:28
React Testing Library Philosophy
04:29
Functional Testing vs Unit Testing
04:20
TDD (Test Driven Development) vs BDD (Behavior Driven Development)
01:27
Testing Library and Accessibility
05:23
RESOURCE: Where to find code if you'd rather not write React for this course
01:40

Simple App: Color Button

15 lectures
Overall Course Plan
03:21
Start Color Button App
09:54
`logRoles` method for debugging roles
02:05
Test Behavior when Clicking Button
04:29
OPTIONAL React Code: Click Button to Change Color
06:05
Manual Acceptance Testing
01:32
Test Initial Condition of Button and Checkbox
07:23
Introduction to Code Quizzes
03:35
Code Quiz! Confirm Button Disable on Checkbox Check
02:27
Code Quiz Solution: Confirm Button Disable on Checkbox Check
01:22
Code Quiz! Disabled Button Turns Gray
04:53
Unit Testing Functions
10:46
Code Quiz! Update Tests for New Color Names
04:37
When to Unit Test
02:11
Review: Simple App
01:36

ESLint with Testing Library, plus Prettier

3 lectures
ESLint and Prettier
04:42
ESLint for Testing Library, Jest-DOM and Vitest
00:27
Configuring ESLint and Prettier in VSCode
00:14

Sundaes On Demand: Form Review and Popover

11 lectures
Introduction to Sundaes on Demand
09:56
WARNING: VSCode may look different!
00:28
Code Organization and Introduction to SummaryForm
04:23
Code Quiz: Checkbox Enables Button
05:56
OPTIONAL React Code: SummaryForm Checkbox and Button
02:15
React Bootstrap Popover and Testing Library userEvent
04:44
Replace `fireEvent` with `userEvent`
05:02
Screen Query Methods
05:04
Testing Element is Not on Page: Popover Tests
07:42
OPTIONAL React Code: Popover
02:05
Review: Summary Form
02:49

Simulating Server Response with Mock Service Worker

15 lectures
OrderEntry Server Data Introduction
02:32
Introduction to Mock Service Worker and Handlers
08:33
Why not mock axios using Jest / Vitest?
00:43
Setting up the Mock Service Worker Server
02:55
Tests with Mock Service Worker: Scoop Options
08:35
TROUBLESHOOTING: "ReferenceError: Response is not defined"
00:21
OPTIONAL React Code: Options and ScoopOption Components
13:38
Using `await findBy` to Find Elements that Populate Asynchronously
03:14
Code Quiz! Topping Options from Server
07:52
Error Server Response Planning
03:40
Simulating Server Error Response in Tests
09:08
OPTIONAL React Code: Alert Banner for Options Server Error
07:11
Tools for Debugging Tests
09:23
OPTIONAL: Why doesn't "name" work with the role "alert"?
00:45
Review: Server Error Response and Test Debugging Tools
02:04

Testing Components Wrapped in a Provider

14 lectures
Intro to Tests for Total and Subtotals
01:00
Entering Text Input: Subtotal Tests
11:06
OPTIONAL React Code: OrderDetails Context
21:54
OPTIONAL React Code: Use Context to Display Scoops Subtotal
25:59
Adding Context to Test Setup
04:18
Creating Custom Render to Wrap in Provider By Default
06:18
Review: Scoops Subtotal with Context
02:03
Code Quiz! Toppings Subtotal
07:49
OPTIONAL React Code: Toppings Checkboxes
03:14
Note on expected warning in the next lecture
00:38
Code Quiz! Grand Total
13:54
OPTIONAL: "Not wrapped in act()..." Warning
10:19
OPTIONAL: Why is the explicit unmount needed
00:24
Manual Acceptance Testing
02:39

Final Exam: Order Phases

8 lectures
Introduction to Final Exam: Order Phases
07:04
Tips for the new MSW Handler
05:21
Debugging Tips
08:02
OPTIONAL React Hints for Order Phase Coding
03:44
Final Exam Solution
07:34
OPTIONAL React Code: Order Phases
06:20
Review: Final Exam, and Introduction to Optional Practice
03:08
Common Mistakes with React Testing Library
00:23

Optional Extra Practice

7 lectures
Standard Questions for New Tests and Introduction to Exercises
06:07
Conditional Toppings Section on Summary Page
05:00
Disable Order Button if No Scoops Ordered
04:44
Red Input Box for Invalid Scoop Count
09:39
No Scoops Subtotal Update for Invalid Scoop Count
05:18
Server Error on Order Confirmation Page
05:55
Congratulations and Thank You!
00:52

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.