Tại Sao Lập Trình Viên Frontend Cần Sử Dụng jest.spyOn

Nếu bạn đang viết kiểm thử cho các ứng dụng frontend mà vẫn chưa sử dụng jest.spyOn, bạn đang bỏ lỡ một trong những công cụ mạnh mẽ nhất mà Jest cung cấp. Hãy cùng tôi khám phá tại sao, khi nào, và cách sử dụng nó — với những ví dụ thực tế giúp nâng cao khả năng kiểm thử của bạn.

💡 jest.spyOn Là Gì?

jest.spyOn cho phép bạn theo dõi và kiểm soát cách một hàm hoạt động trong quá trình kiểm thử — mà không cần thay đổi cách triển khai gốc.

Bạn có thể:

• Kiểm tra xem một hàm đã được gọi hay chưa
• Kiểm soát giá trị trả về của nó
• Theo dõi số lần nó được kích hoạt
• Khôi phục hàm sau khi kiểm thử

🧪 Ví Dụ 1: Theo Dõi Một Hàm Tiện Ích

// utils/date.js
export function formatDate(date) {
  return new Intl.DateTimeFormat('en-US').format(date);
}

// components/Greeting.js
import { formatDate } from '../utils/date';

export function Greeting({ date }) {
  return <p>Chào bạn! Hôm nay là {formatDate(date)}</p>;
}

import * as dateUtils from '../utils/date';

test('gọi formatDate với ngày chính xác', () => {
  const spy = jest.spyOn(dateUtils, 'formatDate');
  render(<Greeting date={new Date('2025-09-16')} />);
  expect(spy).toHaveBeenCalledWith(new Date('2025-09-16'));
  spy.mockRestore();
});

🧪 Ví Dụ 2: Giả Lập Một Hàm Tạm Thời

spy.mockReturnValue('16 tháng 9, 2025');

test('hiển thị ngày giả lập', () => {
  const spy = jest.spyOn(dateUtils, 'formatDate').mockReturnValue('16 tháng 9, 2025');
  const { getByText } = render(<Greeting date={new Date()} />);
  expect(getByText(/16 tháng 9, 2025/)).toBeInTheDocument();
  spy.mockRestore();
});

🧠 Khi Nào Nên Sử Dụng jest.spyOn

Sử dụng khi:

• Bạn muốn quan sát một hàm mà không thay thế nó
• Bạn cần giả lập một hàm tạm thời
• Bạn đang kiểm thử các hiệu ứng phụ hoặc tương tác
• Bạn muốn tránh việc kiểm thử chi tiết triển khai

🚫 Khi Nào Không Nên Sử Dụng

Tránh sử dụng jest.spyOn khi:

• Bạn đang kiểm thử các hàm thuần túy trực tiếp (sử dụng jest.fn() thay thế)
• Bạn đang giả lập toàn bộ mô-đun (sử dụng jest.mock())

📌 Thực Hành Tốt Nhất

• Luôn mockRestore() sau kiểm thử để tránh tác động phụ
• Sử dụng spy.mockImplementation() cho hành vi tùy chỉnh
• Giữ cho kiểm thử của bạn tập trung: chỉ theo dõi những gì cần thiết

🧨 Kết Luận

jest.spyOn giống như một kính lúp cho các bài kiểm thử của bạn — nó cho phép bạn phóng to hành vi mà không cần viết lại mã. Sử dụng một cách khôn ngoan, và các bài kiểm thử của bạn sẽ sạch sẽ, thông minh và dễ bảo trì hơn.

Thích bài viết này? Theo dõi tôi để nhận thêm nhiều mẹo kiểm thử thực tế và cái nhìn sâu sắc về frontend. Hãy cùng viết mã không chỉ mang tính chức năng — mà còn dễ kiểm thử và đáng tin cậy.