dev-proPRO
OverviewLộ Trình HọcPhỏng VấnAI System
dev-pro— Thực chiến Frontend React, Next.js & Luyện phỏng vấn
contact@dev-pro.online•Code thật. Phỏng vấn thật.
Seri React Mastery8 Lộ trình · Sandbox
Seri React Mastery
8 tracks
T01
React Core Foundations0/7 hoàn thành
T02
React Hooks Mastery0/5 hoàn thành
T03
React Component Architecture & Forms0/4 hoàn thành
T04
React & Compiler: Modern Path0/4 hoàn thành
T05
Form Engineering: RHF + Zod + Server Actions0/2 hoàn thành
T06
Advanced React Performance Patterns0/4 hoàn thành
T07
Enterprise React Testing & Production Readiness0/5 hoàn thành
  • Bài học (5)
  • Tư Duy Testing Chuẩn với Vitest & React Testing Library (RTL)18m•intermediate
  • Mocking Tầng Mạng với MSW (Mock Service Worker)20m•advanced
  • Kiểm Thử Custom Hooks & Zustand Store Độc Lập18m•intermediate
  • Accessibility (a11y) & Kiến Trúc Chịu Lỗi (Error Resilience)20m•advanced
  • Playwright E2E: Kiểm Thử Critical User Journeys24m•advanced
T08
Production Capstone: TeamBoard0/1 hoàn thành
Tiến độ React0/32 bài
Enterprise React Testing & Production Readiness
intermediate
18 phút
#Testing Custom Hooks
#renderHook
#act()
#Zustand Testing

Kiểm Thử Custom Hooks & Zustand Store Độc Lập

Sử dụng renderHook, act() và test-isolation để kiểm thử các Custom Hooks phức tạp và kiểm tra logic chuyển đổi trạng thái của Zustand Store.

Core Mental Model

Custom Hooks không thể gọi trực tiếp như hàm JS thông thường vì chúng chứa logic React Hooks. Hàm `renderHook` bọc hook vào một component giả lập vô hình để bạn kiểm tra giá trị `result.current`.

Key Takeaways & Principles

`renderHook(() => useCustomHook())` cung cấp biến `result.current` để đọc giá trị mới nhất của hook sau mỗi lần cập nhật.
Khi trực tiếp gọi callback làm đổi state của hook, bọc thao tác bằng `act`. Các tiện ích như `userEvent` và async query của Testing Library thường đã điều phối cập nhật; hãy `await` chúng thay vì bọc máy móc mọi dòng.
Đối với Zustand Store, có thể test trực tiếp các action bằng cách gọi `useStore.getState().myAction()` mà không nhất thiết phải render component.