# การทดสอบ React (React / Next.js)

> React Testing Library, Jest, Vitest, การทดสอบ component, mocking, การโต้ตอบของผู้ใช้, coverage

- 20 คำถามสัมภาษณ์
- Mid-Level
- [คำถามสัมภาษณ์: React / Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions.md)

## 1. ความแตกต่างหลักระหว่าง getBy, queryBy และ findBy ใน React Testing Library คืออะไร?

**คำตอบ**

getBy จะโยน error หากไม่พบ element (assertions แบบ synchronous), queryBy จะคืนค่า null หากไม่พบ element (ตรวจสอบการไม่มีอยู่), และ findBy จะคืนค่า Promise สำหรับ element แบบ asynchronous ใช้ getBy เป็นค่าเริ่มต้นสำหรับ element ที่ต้องมีอยู่, queryBy เพื่อตรวจสอบว่า element ไม่มีอยู่, และ findBy เพื่อรอให้ element ปรากฏหลังจาก delay

## 2. ข้อได้เปรียบหลักของ getByRole เมื่อเทียบกับ getByTestId คืออะไร?

**คำตอบ**

getByRole ส่งเสริมแนวปฏิบัติที่ดีด้านการเข้าถึงโดยการกำหนดเป้าหมาย element ตามบทบาท ARIA เชิงความหมาย (button, textbox, heading) ซึ่งช่วยปรับปรุงการเข้าถึง component สำหรับ screen reader getByTestId ต้องเพิ่ม attribute data-testid ที่ไม่ได้ให้คุณค่าแก่ผู้ใช้ปลายทาง React Testing Library แนะนำให้ใช้ getByRole, getByLabelText และ getByText ก่อน getByTestId

## 3. จะทดสอบการ render แบบมีเงื่อนไขของ element ที่ไม่มีอยู่ใน DOM ได้อย่างไร?

**คำตอบ**

ใช้ queryBy เพื่อตรวจสอบการไม่มีอยู่ของ element เนื่องจากจะคืนค่า null แทนที่จะโยน error ตัวอย่าง: expect(screen.queryByText('Error')).toBeNull() หรือ expect(screen.queryByText('Error')).not.toBeInTheDocument() getBy จะโยน error และทำให้ test ล้มเหลว ในขณะที่ findBy จะรอให้ element ปรากฏ (timeout หากไม่มี)

## มีอีก 17 คำถาม

- ทำไม React Testing Library จึงแนะนำให้ไม่ทดสอบรายละเอียดการ implement?
- ความแตกต่างระหว่าง render และ screen ใน React Testing Library คืออะไร?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ React / Next.js อื่นๆ

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/react-next/interview-questions/javascript-essentials.md): 25 คำถาม, Junior
- [พื้นฐาน React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-fundamentals.md): 20 คำถาม, Junior
- [React Hooks](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-hooks.md): 22 คำถาม, Junior
- [วงจรชีวิตของ component](https://sharpskill.dev/th/technologies/react-next/interview-questions/component-lifecycle.md): 18 คำถาม, Junior
- [React Router](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-router.md): 20 คำถาม, Junior
- [การจัดการ state ด้วย Context](https://sharpskill.dev/th/technologies/react-next/interview-questions/state-management-context.md): 18 คำถาม, Junior
- [ฟอร์มและ Controlled Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/forms-controlled-components.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูลและ API](https://sharpskill.dev/th/technologies/react-next/interview-questions/fetching-data-api.md): 20 คำถาม, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-query-tanstack.md): 20 คำถาม, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/th/technologies/react-next/interview-questions/styling-css-in-js.md): 18 คำถาม, Mid-Level
- [พื้นฐาน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 คำถาม, Mid-Level
- [TypeScript กับ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/typescript-react.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูล Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 คำถาม, Mid-Level
- [Server Actions ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 คำถาม, Mid-Level
- [การกำหนดเส้นทางและการนำทางใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 คำถาม, Mid-Level
- [API Routes ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-api-routes.md): 20 คำถาม, Mid-Level
- [Metadata & SEO ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18 คำถาม, Mid-Level
- [Middleware และ Auth ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 คำถาม, Mid-Level
- [Zustand State Management](https://sharpskill.dev/th/technologies/react-next/interview-questions/zustand-state-management.md): 18 คำถาม, Mid-Level
- [การเพิ่มประสิทธิภาพ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-performance-optimization.md): 22 คำถาม, Senior
- [Error Boundaries & การจัดการข้อผิดพลาด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-error-boundaries.md): 18 คำถาม, Senior
- [Advanced React Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 คำถาม, Senior
- [ฟีเจอร์ขั้นสูงของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24 คำถาม, Senior
- [การ Deploy & Production ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 คำถาม, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-architecture-patterns.md): 22 คำถาม, Senior
- [React Server Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-server-components.md): 26 คำถาม, Senior
- [การแปลภาษา Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 คำถาม, Senior
- [React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-security-best-practices.md): 22 คำถาม, Senior

---

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