Giới Thiệu

Khi viết các bài kiểm tra với React Testing Library, bước "xác minh" này luôn cần thiết ở cuối (kiểm tra với expect xem màn hình mục tiêu có khớp với trạng thái mong đợi hay không).

Bài viết này sẽ tóm tắt ngắn gọn ba phương thức kiểm tra cơ bản mà bạn nên học trước tiên để tối ưu hóa quy trình phát triển và kiểm tra ứng dụng React của mình.

1. Xác Minh Sự Tồn Tại của Phần Tử: .toBeInTheDocument()

expect(element).toBeInTheDocument();

Phương thức này xác minh rằng phần tử đang hiện diện trên màn hình.
Nó thường được sử dụng cho các kiểm tra như "Nút có hiển thị không?" hoặc "Thông báo lỗi có được hiển thị không?".

Ví Dụ Thực Tế

Giả sử bạn có một nút đăng nhập trong ứng dụng của mình:

<button data-testid="login-button">Đăng Nhập</button>

Khi viết kiểm tra, bạn có thể sử dụng phương thức này để xác minh rằng nút đăng nhập thực sự có mặt trên giao diện:

test('Nút Đăng Nhập có hiển thị', () => {
  const { getByTestId } = render(<MyComponent />);
  const button = getByTestId('login-button');
  expect(button).toBeInTheDocument();
});

2. Xác Minh Nội Dung Văn Bản: .toHaveTextContent()

expect(element).toHaveTextContent("Đăng nhập thành công");

Phương thức này xác minh xem phần tử có chứa văn bản này hay không.
Nó rất hữu ích để kiểm tra xem các nhãn hoặc nội dung thông điệp có chính xác hay không.

Ví Dụ Thực Tế

Giả sử sau khi người dùng đăng nhập thành công, bạn muốn hiển thị một thông báo:

<p data-testid="success-message">Đăng nhập thành công</p>

Khi viết kiểm tra, bạn có thể xác minh rằng thông điệp này được hiển thị đúng:

test('Thông báo đăng nhập thành công', () => {
  const { getByTestId } = render(<MyComponent />);
  const message = getByTestId('success-message');
  expect(message).toHaveTextContent('Đăng nhập thành công');
});

3. Xác Minh Tình Trạng Bị Khóa: .toBeDisabled()

expect(button).toBeDisabled();

Phương thức này xác minh xem các nút hoặc trường nhập có ở trạng thái không thể nhấp được hay không.
Để xác minh trạng thái có thể nhấp, hãy sử dụng .toBeEnabled().

Ví Dụ Thực Tế

Giả sử bạn có một nút đăng ký mà bạn muốn đảm bảo nó bị khóa cho đến khi người dùng điền đầy đủ thông tin:

<button data-testid="register-button" disabled>Đăng Ký</button>

Bạn có thể kiểm tra như sau:

test('Nút Đăng Ký bị khóa', () => {
  const { getByTestId } = render(<MyComponent />);
  const button = getByTestId('register-button');
  expect(button).toBeDisabled();
});

Tóm Tắt

• Kiểm tra sự tồn tại → .toBeInTheDocument()
• Kiểm tra nội dung văn bản → .toHaveTextContent()
• Kiểm tra tình trạng bị khóa → .toBeDisabled()

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

• Luôn đảm bảo rằng các bài kiểm tra của bạn là dễ đọc và dễ hiểu. Sử dụng các tên biến rõ ràng và mô tả cho các phần tử.
• Tổ chức các bài kiểm tra theo cách mà chúng có thể dễ dàng mở rộng trong tương lai.

Các Cạm Bẫy Thường Gặp

• Không kiểm tra đủ các tình huống khác nhau cho từng phương thức. Hãy đảm bảo rằng bạn kiểm tra các trường hợp biên và các tình huống không mong muốn.

Mẹo Tăng Hiệu Suất

• Sử dụng các phương thức kiểm tra một cách hợp lý để giảm thời gian chạy của bài kiểm tra. Kiểm tra chỉ những gì cần thiết.

Giải Quyết Sự Cố

• Nếu bạn nhận được thông báo lỗi "Không tìm thấy phần tử", hãy kiểm tra lại cách bạn render component và xem liệu phần tử đó có thực sự tồn tại hay không.

Câu Hỏi Thường Gặp

1. Làm thế nào để kiểm tra nhiều phần tử cùng một lúc?
Bạn có thể sử dụng getAllBy để lấy tất cả các phần tử và sau đó thực hiện các xác minh riêng cho từng phần tử.

2. Có thể sử dụng các phương thức này với các thư viện khác không?
Có, nhưng bạn cần đảm bảo rằng các phần tử được render đúng cách trong môi trường thử nghiệm của bạn.

Kết Luận

Bằng cách nắm vững các phương thức kiểm tra cơ bản của React Testing Library, bạn có thể đảm bảo rằng ứng dụng của mình hoạt động đúng và mang lại trải nghiệm người dùng tốt nhất. Hãy bắt đầu thực hành ngay hôm nay để nâng cao kỹ năng kiểm tra của bạn!

Bạn có thể tìm hiểu thêm về React Testing Library trong tài liệu chính thức hoặc các khóa học trực tuyến để mở rộng kiến thức của mình.