| name | testing-jest-snapshot-testing |
| description | null |
Snapshot Testing
Category: testing-jest · Status: 🟢 Active
When to use
Khi dùng snapshot có chủ đích: nhỏ, ổn định, review diff; tránh lạm dụng.
Steps
- Snapshot chỉ cho output ổn định, ít đổi (markup nhỏ, kết quả serialize).
- Ưu tiên
toMatchInlineSnapshot để diff nằm ngay trong test, dễ review.
- Review kỹ mọi diff snapshot trong PR; không
-u mù khi test đỏ.
- Tránh snapshot component lớn/động (ngày giờ, id ngẫu nhiên) — gây flaky.
- Với hành vi cụ thể, dùng assertion thường thay vì snapshot toàn bộ.
Template
it('render badge đúng nhãn', () => {
const { container } = render(<Badge tone="success">OK</Badge>);
expect(container.firstChild).toMatchInlineSnapshot(`
<span class="badge badge--success">OK</span>
`);
});
Example
Good: snapshot nhỏ, inline, output ổn định, diff được review.
Avoid: snapshot cả trang, chứa giá trị động, update -u không nhìn diff.
Checklist