TestingSnapshot chỉ có giá trị khi thay đổi của nó được đọc thật sự. Chạy -u theo phản xạ biến nó thành ảnh chụp trạng thái hiện tại — luôn "đúng", không bao giờ bắt được lỗi.
Vì sao rơi vào tình trạng đó:
- Snapshot quá lớn (cả cây DOM của một trang). Reviewer không có cách nào đọc 400 dòng diff để biết cái nào là cố ý.
- Snapshot không ổn định vì chứa timestamp, id sinh ngẫu nhiên, class hash của CSS-in-JS.
- Snapshot đứng thay cho assertion: không ai viết được ra bằng lời cái mà test này bảo vệ.
Cách chữa:
- Thay bằng assertion tường minh cho hành vi quan tâm: expect(screen.getByRole("alert")).toHaveTextContent(/hết hàng/i). Test fail thì đọc tên test là biết hỏng gì.
- Nếu vẫn muốn snapshot, dùng inline snapshot cho mảnh nhỏ (toMatchInlineSnapshot) — giá trị nằm ngay trong file test nên diff đọc được.
- Loại phần biến động bằng property matcher ({ createdAt: expect.any(Date) }) hoặc serializer tuỳ chỉnh.
- Coi mọi thay đổi snapshot như thay đổi code: cập nhật từng cái một, đọc diff, không -u cả suite.
Snapshot vẫn hợp lý ở đâu: output serialize nhỏ và có tính hợp đồng — kết quả một hàm format, cấu hình sinh ra, payload GraphQL, error message của thư viện.