# Kiểm thử React (React / Next.js)

> React Testing Library, Jest, Vitest, kiểm thử component, mocking, tương tác người dùng, coverage

- 20 câu hỏi phỏng vấn
- Mid-Level
- [Câu hỏi phỏng vấn: React / Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van.md)

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

**Câu trả lời**

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.

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

**Câu trả lời**

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.

## 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?

**Câu trả lời**

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).

## Còn 17 câu hỏi nữa

- 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ì?

Đăng ký miễn phí: https://sharpskill.dev/vi/login

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

- [Nền tảng JavaScript](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/javascript-essentials.md): 25 câu hỏi, Junior
- [Nền tảng React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-fundamentals.md): 20 câu hỏi, Junior
- [React Hooks](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-hooks.md): 22 câu hỏi, Junior
- [Vòng đời component](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/component-lifecycle.md): 18 câu hỏi, Junior
- [React Router](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-router.md): 20 câu hỏi, Junior
- [Quản lý state với Context](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/state-management-context.md): 18 câu hỏi, Junior
- [Biểu mẫu và Controlled Components](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/forms-controlled-components.md): 20 câu hỏi, Mid-Level
- [Lấy dữ liệu & API](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/fetching-data-api.md): 20 câu hỏi, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-query-tanstack.md): 20 câu hỏi, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/styling-css-in-js.md): 18 câu hỏi, Mid-Level
- [Nền tảng Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-fundamentals.md): 25 câu hỏi, Mid-Level
- [TypeScript với React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/typescript-react.md): 20 câu hỏi, Mid-Level
- [Data Fetching trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-data-fetching.md): 24 câu hỏi, Mid-Level
- [Server Actions trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-server-actions.md): 20 câu hỏi, Mid-Level
- [Định tuyến & Điều hướng trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-routing-navigation.md): 22 câu hỏi, Mid-Level
- [API Routes trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-api-routes.md): 20 câu hỏi, Mid-Level
- [Metadata & SEO trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-metadata-seo.md): 18 câu hỏi, Mid-Level
- [Middleware & Auth trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-middleware-auth.md): 22 câu hỏi, Mid-Level
- [Zustand State Management](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/zustand-state-management.md): 18 câu hỏi, Mid-Level
- [Tối ưu hiệu năng React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-performance-optimization.md): 22 câu hỏi, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-error-boundaries.md): 18 câu hỏi, Senior
- [Advanced React Patterns](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/advanced-react-patterns.md): 20 câu hỏi, Senior
- [Tính năng nâng cao của Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-advanced-features.md): 24 câu hỏi, Senior
- [Triển khai & Môi trường Production với Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-deployment-production.md): 20 câu hỏi, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-architecture-patterns.md): 22 câu hỏi, Senior
- [React Server Components](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-server-components.md): 26 câu hỏi, Senior
- [Quốc tế hóa Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-internationalization.md): 20 câu hỏi, Senior
- [React Bảo mật & Thực hành tốt nhất](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-security-best-practices.md): 22 câu hỏi, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-testing