Mid #testing#rtl#accessibility
React Testing Library: nguyên tắc, thứ tự ưu tiên query và userEvent?
⚡ Trả lời nhanh
RTL test hành vi người dùng thấy thay vì chi tiết cài đặt. Ưu tiên query theo accessibility: `getByRole` (kèm name) > `getByLabelText` > `getByText` > ... > `getByTestId` là cuối cùng. Dùng `userEvent` (async) thay `fireEvent`, và `findBy*` cho nội dung bất đồng bộ.
| Biến thể | Khi dùng |
|---|---|
getBy* | phần tử phải có mặt, ném lỗi nếu không |
queryBy* | khẳng định không tồn tại (toBeNull) |
findBy* | chờ xuất hiện (Promise) |
test("submit hiển thị lời chào", async () => {
const user = userEvent.setup();
render(<Greeting />);
await user.type(screen.getByLabelText(/tên/i), "An");
await user.click(screen.getByRole("button", { name: /gửi/i }));
expect(await screen.findByText("Xin chào An")).toBeInTheDocument();
});
- Thứ tự:
ByRole,ByLabelText,ByPlaceholderText,ByText,ByDisplayValue, rồiByAltText/ByTitle, cuối cùngByTestId. - Mock network bằng MSW thay vì mock từng hàm fetch.
- Không test state nội bộ hay số lần render.