การทดสอบ React
React Testing Library, Jest, Vitest, การทดสอบ component, mocking, การโต้ตอบของผู้ใช้, coverage
1ความแตกต่างหลักระหว่าง getBy, queryBy และ findBy ใน React Testing Library คืออะไร?
ความแตกต่างหลักระหว่าง 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 เมื่อเทียบกับ 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 ได้อย่างไร?
จะทดสอบการ render แบบมีเงื่อนไขของ element ที่ไม่มีอยู่ใน DOM ได้อย่างไร?
คำตอบ
ใช้ queryBy เพื่อตรวจสอบการไม่มีอยู่ของ element เนื่องจากจะคืนค่า null แทนที่จะโยน error ตัวอย่าง: expect(screen.queryByText('Error')).toBeNull() หรือ expect(screen.queryByText('Error')).not.toBeInTheDocument() getBy จะโยน error และทำให้ test ล้มเหลว ในขณะที่ findBy จะรอให้ element ปรากฏ (timeout หากไม่มี)
ทำไม React Testing Library จึงแนะนำให้ไม่ทดสอบรายละเอียดการ implement?
ความแตกต่างระหว่าง render และ screen ใน React Testing Library คืออะไร?
+17 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ React / Next.js อื่นๆ
พื้นฐาน JavaScript
พื้นฐาน React
React Hooks
วงจรชีวิตของ component
React Router
การจัดการ state ด้วย Context
ฟอร์มและ Controlled Components
การดึงข้อมูลและ API
React Query (TanStack Query)
Styling & CSS-in-JS
พื้นฐาน Next.js
TypeScript กับ React
การดึงข้อมูล Next.js
Server Actions ของ Next.js
การกำหนดเส้นทางและการนำทางใน Next.js
API Routes ใน Next.js
Metadata & SEO ใน Next.js
Middleware และ Auth ใน Next.js
Zustand State Management
การเพิ่มประสิทธิภาพ React
Error Boundaries & การจัดการข้อผิดพลาด
Advanced React Patterns
ฟีเจอร์ขั้นสูงของ Next.js
การ Deploy & Production ของ Next.js
Architecture & Design Patterns
React Server Components
การแปลภาษา Next.js
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี