Công nghệ Web

vitest unit test react next js: phản hồi nhanh để refactor không sợ

vitest unit test react next js: happy-dom, vi.mock — gọi 0905 151 701 khi thiết CI component với Webchốt.

Tác giả: Nguyễn Văn Trường·Cập nhật: 18/06/2025·8 phút đọc

Vitest Unit Test React Next.js: Tốc Độ & DX

vitest unit test react next js: phản hồi nhanh để refactor không sợ

Cập nhật: 04/05/2026 · Tác giả: Trường — Founder Webchốt

vitest unit test react next js kết hợp engine Vite và API quen thuộc để chạy test đơn vị siêu nhanh trên máy dev và CI — giảm ma sát khi team muốn chuyển dần từ Jest. Unit test không bắt mọi bug tích hợp nhưng bảo vệ pure function, reducer và component không phụ thuộc mạng. Bài viết mô tả cấu hình vitest.config.ts alias giống tsconfig, mock ESM và chiến lược song song Jest trong giai đoạn chuyển đổi. Cần chuẩn hóa QA: dịch vụ, giá, liên hệ — 0905 151 701, hi@webchot.com.

Terminal test xanh minh họa vitest unit test react next js, Webchốt

Watch mode giữ flow refactor — đừng chỉ chạy test trước khi push | Nguồn: webchot.com

cấu hình alias và pool workers trên CI

Đồng bộ resolve.paths với Next để import @/ không vỡ trong test; dùng vitest pool threads phù hợp CPU runner GitHub. Cache node_modules và .vitest tùy ngân sách. Giữ timeout khác nhau cho test chậm thanh toán — nhóm tag.

vitest unit test react next js với Testing Library

Ưu tiên kiểm tra hành vi người dùng — getByRole thay querySelector dài. Khi snapshot, giới hạn component nhỏ ổn định; tránh snapshot cả trang lớn dễ vỡ vặt style. Song song với MSW cho fetch nếu cần — đừng mock fetch tay lung tung.

Điểm 1: setupFiles cleanup sau mỗi test.
Điểm 2: Fake timers có điều kiện.
Điểm 3: eslint-plugin-testing-library để tránh anti-pattern.
Điểm 4: Báo cáo coverage upload codecov có ngưỡng.

Developer chạy test unit trên laptop tại văn phòng

Bảng so sánh: Jest so với Vitest

Tiêu chí chọn cho Next.js 2026.

Tiêu chí	Lựa chọn A	Lựa chọn B	Khuyên dùng
Tốc độ dev	Jest ổn	Vitest nhanh	B nếu Vite toolchain
ESM native	Cần cấu hình	Tốt hơn	B cho lib ESM
Hệ sinh thái	Rộng lâu đời	Đang lớn nhanh	Đo plugin cần thiết
Di trú	Không cần	Cần thời gian	Song song CI

Giữ Jest nếu đội chưa sẵn sàng — chất lượng test quan trọng hơn logo công cụ.

Quy trình migrate từ Jest sang Vitest

Bước 1: Chọn package lõi pilot.
Bước 2: Ánh xạ jest.fn sang vi.fn.
Bước 3: Chạy hai runner song song trên CI ngắn.
Bước 4: Chuyển dần script package.json.
Bước 5: Gỡ Jest khi coverage đạt ngưỡng.

Nhảy bỏ bước ba dễ gây lỗ hổng CI im lặng.

Màn hình split editor test và component React

Phương án dịch vụ Webchốt

Xem dịch vụ chất lượng phần mềm để thiết pipeline test. Tham khảo template có script mẫu. Liên hệ hi@webchot.com hoặc 0905 151 701.

Sai lầm phổ biến khi dùng Vitest

Bốn lỗi làm test dễ vỡ hoặc sai tin.

Sai lầm 1: Mock quá rộng che regression thật.
Sai lầm 2: Không isolate biến môi trường giữa test.
Sai lầm 3: Snapshot không review trong PR.
Sai lầm 4: Bỏ qua test flaky thay vì fix gốc.

Nhóm kỹ sư review coverage trên màn hình

Khi mock module global, hãy reset state giữa các file test để tránh rò rỉ singleton — đặc biệt với in-memory rate limit. Viết helper fetch wrapper test để assert header authorization mà không duplicate code. Với component hiển thị giờ theo timezone, dùng vi.setSystemTime nhất quán. Đối với máy Windows trong team, hãy chạy CI Linux vẫn là nguồn sự thật — nhưng thử vitest local trên Windows nếu có bug đường dẫn. Ghi file CONTRIBUTING về chính sách snapshot update — ai được phép -u và khi nào. Coverage không nên trở thành áp lực đạt 100% ở mọi package — thương lượng theo rủi ro nghiệp vụ.

Với thư viện UI, ưu tiên test interaction và state logic hơn snapshot ảnh chụp dài — hình ảnh dễ vỡ vặt khi đổi font OS. Khi dùng MSW, phiên bản handler phải khớp schema API thực — cập nhật cả hai trong cùng PR. Đặt ngưỡng timeout khác nhau cho test mạng và pure unit. Ghi chú trong README cách chạy subset test bằng tag để dev không phải chờ toàn suite trên máy yếu. Với Next.js middleware, tách test env để không làm ô nhiễm global fetch. Khi CI chạy song song, tránh chia sẻ file temp giữa worker — dùng tmp random mỗi test.

Hãy cấu hình `poolOptions` phù hợp RAM runner — vitest dễ spawn worker nhiều hơn Jest và gây OOM trên VPS nhỏ. Với component async server, mock `use` và suspense boundary để test client wrapper mà không mount cả app. Ghi coverage threshold theo package thay vì một số toàn repo — UI library nên cao hơn script một lần. Khi test hook custom, tách pure logic ra file ts không JSX để chạy nhanh trên CI không cần canvas. Thử `vitest --inspect` local khi race khó tái hiện. Với form tiền tệ VND, kiểm tra formatter không làm vỡ typing trong controlled input.

Đừng quên chạy test timezone Asia/Ho_Chi_Minh trên CI — bug chỉ xuất hiện sau 17h UTC là chuyện thường. Khi cần đồng hành QA automation, Webchốt có thể giúp bạn chọn hình thái test piramid hợp lý.

Với component dùng `useEffect` nặng, tách logic thuần ra `*.test.ts` không mount React — vitest chạy nhanh gấp nhiều lần. Khi mock `next/navigation`, tránh reset module toàn cục trừ khi cần vì dễ làm test khác không độc lập. Ghi snapshot JSON nhỏ cho API chứ không snapshot cả DOM tree marketing — bảo trì lâu dài sẽ khổ. Nếu dùng happy-dom, nhớ nó không 100% giống jsdom cho một số event; chọn một mặc định cho CI. Khi song song hóa, khóa seed random nếu test dùng faker — deterministic hơn flaky. Với hook form + zod, test parse error bằng schema trực tiếp trước khi mount UI để lỗi hiển thị không che lỗi logic. Cuối sprint, tính tỷ lệ thời gian unit versus e2e — nếu e2e chiếm quá nửa, cần dời assert xuống tầng thấp hơn.

Đừng bật coverage global 90% một sớm một chiều — hãy tăng ngưỡng theo package để đội không hack bằng test vô nghĩa. Khi debug chỉ một file, dùng `vitest related` kết hợp git diff để tiết kiệm phút chạy.

Hãy hợp đồng hóa dữ liệu test: dùng factory nhỏ sinh object hợp lệ thay vì copy JSON khổng lồ vào mỗi file. Với hook phụ thuộc `window.matchMedia`, mock nhất quán trên cả CI và local — đừng để test pass trên Mac nhưng fail Linux headless. Ghi file `setupTests.ts` ngắn gọn và tránh side effect toàn cục khó debug. Khi test reducer Zustand, assert immutability bằng snapshot freeze shallow nếu cần — bug “đục” state chia sẻ rất tinh vi. Cuối quý, xóa test duplicate sau refactor component — trùng lặp làm thời gian CI tăng mà không thêm độ phủ.

Khi module ngoài dùng `import.meta`, kiểm tra cấu hình `resolve.conditions` của vitest khớp với bundler production — sai một dòng có thể test import file khác hẳn. Với test bất đồng bộ, luôn `await` hoặc return promise để không báo xanh ảo. Ghi rõ trong README cách chạy test một lần so với watch để máy laptop yếu không kẹt CPU.