Question 1

Sự khác biệt chính giữa getBy, queryBy và findBy trong React Testing Library là gì?

Accepted Answer

getBy ném lỗi nếu phần tử không tồn tại (assertions đồng bộ), queryBy trả về null nếu phần tử không tồn tại (kiểm tra sự vắng mặt), và findBy trả về Promise cho các phần tử bất đồng bộ. Sử dụng getBy mặc định cho các phần tử phải tồn tại, queryBy để xác nhận phần tử không có mặt, và findBy để chờ phần tử xuất hiện sau một khoảng delay.

Question 2

Ưu điểm chính của getByRole so với getByTestId là gì?

Accepted Answer

getByRole khuyến khích các thực hành tốt nhất về khả năng truy cập bằng cách nhắm mục tiêu các phần tử theo vai trò ARIA ngữ nghĩa (button, textbox, heading), giúp cải thiện khả năng truy cập của component cho trình đọc màn hình. getByTestId yêu cầu thêm các thuộc tính data-testid nhân tạo không mang lại giá trị cho người dùng cuối. React Testing Library khuyến nghị ưu tiên getByRole, getByLabelText và getByText trước getByTestId.

Question 3

Làm thế nào để kiểm thử việc render có điều kiện của một phần tử KHÔNG có mặt trong DOM?

Accepted Answer

Sử dụng queryBy để xác nhận sự vắng mặt của phần tử, vì nó trả về null thay vì ném lỗi. Ví dụ: expect(screen.queryByText('Error')).toBeNull() hoặc expect(screen.queryByText('Error')).not.toBeInTheDocument(). getBy sẽ ném lỗi và làm test thất bại, trong khi findBy chờ phần tử xuất hiện (timeout nếu vắng mặt).

Kiểm thử React

Sự khác biệt chính giữa getBy, queryBy và findBy trong React Testing Library là gì?

Câu trả lời

Ưu điểm chính của getByRole so với getByTestId là gì?

Câu trả lời

Làm thế nào để kiểm thử việc render có điều kiện của một phần tử KHÔNG có mặt trong DOM?

Câu trả lời

Tại sao React Testing Library khuyến nghị KHÔNG kiểm thử chi tiết triển khai?

Sự khác biệt giữa render và screen trong React Testing Library là gì?

Các chủ đề phỏng vấn React / Next.js khác

Nền tảng JavaScript

Nền tảng React

React Hooks

Vòng đời component

React Router

Quản lý state với Context

Biểu mẫu và Controlled Components

Lấy dữ liệu & API

React Query (TanStack Query)

Styling & CSS-in-JS

Nền tảng Next.js

TypeScript với React

Data Fetching trong Next.js

Server Actions trong Next.js

Định tuyến & Điều hướng trong Next.js

API Routes trong Next.js

Metadata & SEO trong Next.js

Middleware & Auth trong Next.js

Zustand State Management

Tối ưu hiệu năng React

Error Boundaries & Error Handling

Advanced React Patterns

Tính năng nâng cao của Next.js

Triển khai & Môi trường Production với Next.js

Architecture & Design Patterns

React Server Components

Quốc tế hóa Next.js

React Bảo mật & Thực hành tốt nhất

Nắm vững React / Next.js cho lần phỏng vấn tiếp theo