Snapshot testing là gì?

Question

Accepted Answer

**Snapshot testing** chụp một "snapshot" của một output nào đó (thường là output render của một UI component hoặc một cấu trúc dữ liệu) và so sánh các lần chạy sau với nó — báo hiệu khi output thay đổi. Nó hữu ích để phát hiện thay đổi ngoài ý muốn, nhưng có các giới hạn cần hiểu.

## Snapshot testing hoạt động thế nào

```text
1. Lần chạy đầu → test GHI LẠI output (vd một component đã render) thành một file SNAPSHOT
2. Các lần chạy sau → SO SÁNH output hiện tại với snapshot đã lưu:
   → KHỚP → pass; KHÁC → fail (output đã thay đổi)
3. Nếu thay đổi là CỐ Ý → CẬP NHẬT snapshot (review diff, rồi chấp nhận)
```

```js
// Jest snapshot test (vd một React component)
test('renders correctly', () => {
  const tree = render(<Button label="Click" />).toJSON();
  expect(tree).toMatchSnapshot();    // so sánh với snapshot đã lưu
});
```

## Công dụng và lợi ích

```text
✓ Phát hiện THAY ĐỔI NGOÀI Ý MUỐN — báo hiệu khi output thay đổi bất ngờ (UI, dữ liệu serialize)
✓ NHANH để viết — không cần assertion thủ công cho output phức tạp; tự bắt kết quả mong đợi
✓ Tốt cho UI component (bắt thay đổi render bất ngờ), config, cấu trúc dữ liệu lớn
```

## Giới hạn (dùng cẩn thận)

```text
⚠️ Snapshot không xác minh TÍNH ĐÚNG ĐẮN — chúng bắt bất kỳ output nào tồn tại (kể cả khi SAI);
   chúng chỉ phát hiện THAY ĐỔI, không phải output ĐÚNG
⚠️ CẬP NHẬT MÙ QUÁNG snapshot (jest -u mà không review) → đánh bại mục đích (chấp nhận
   output hỏng) — một thói quen xấu phổ biến
⚠️ Snapshot lớn/giòn → thay đổi thường xuyên, bị đóng dấu cao su, giá trị thấp
→ Dùng để phát hiện thay đổi; giữ snapshot nhỏ/tập trung; REVIEW diff snapshot;
  đừng chỉ dựa vào chúng (kết hợp với assertion thật cho hành vi).
```

## Tại sao điều này quan trọng

Hiểu snapshot testing có giá trị vì nó là một **kỹ thuật được dùng phổ biến** (đặc biệt cho UI) hữu ích khi áp dụng tốt nhưng có vấn đề khi lạm dụng, nên hiểu cả giá trị và giới hạn của nó là kiến thức thực hành quan trọng.

Snapshot testing — chụp output (thường là một UI component đã render hoặc cấu trúc dữ liệu) và so sánh các lần chạy sau với snapshot đã lưu — **hữu ích để phát hiện thay đổi ngoài ý muốn**: nó báo hiệu khi output thay đổi bất ngờ (bắt thay đổi render UI ngẫu nhiên hoặc thay đổi cấu trúc dữ liệu), **nhanh để viết** (tự bắt output mong đợi mà không cần assert thủ công mọi chi tiết của output phức tạp), và phù hợp với UI component, cấu hình, và cấu trúc dữ liệu lớn.

Hiểu các lợi ích này giải thích sự phổ biến của nó, đặc biệt trong UI testing.

Tuy nhiên, hiểu **các giới hạn là cực kỳ quan trọng** để dùng nó tốt: snapshot **không xác minh tính đúng đắn** — chúng bắt bất kỳ output nào tồn tại (kể cả khi sai), chỉ phát hiện *thay đổi* không phải *đúng* — nên một snapshot có thể khóa cứng output có lỗi. **Cạm bẫy lớn nhất là cập nhật mù quáng snapshot** (chạy lệnh update mà không review diff), vốn đánh bại mục đích bằng cách chấp nhận output có khả năng hỏng — một thói quen xấu phổ biến.

Snapshot lớn, giòn thay đổi thường xuyên bị đóng dấu cao su và cung cấp ít giá trị.

Hiểu cách dùng đúng — để phát hiện thay đổi, giữ snapshot nhỏ và tập trung, **review diff snapshot** cẩn thận, và không chỉ dựa vào chúng (kết hợp với assertion hành vi thật) — phản ánh phán đoán trưởng thành tránh lạm dụng phổ biến.

Vì snapshot testing được dùng rộng rãi (đặc biệt cho UI) và hữu ích để phát hiện thay đổi nhưng dễ bị lạm dụng (khóa cứng output sai, cập nhật mù quáng), và vì hiểu cả giá trị và các giới hạn quan trọng của nó cho phép dùng nó tốt, hiểu snapshot testing là kiến thức có giá trị, liên quan thực tiễn — một kỹ thuật phổ biến cần hiểu đúng, nơi việc trân trọng các giới hạn của nó (phát hiện thay đổi, không phải tính đúng đắn) và cách dùng đúng (review diff, không cập nhật mù quáng) quan trọng như chính kỹ thuật đó, phản ánh phán đoán testing đúng đắn.