Frontend Academy · บทเรียน

@testing-library/react: render และ userEvent

เรนเดอร์คอมโพเนนต์ใน DOM จำลอง ค้นหาด้วยบทบาทและข้อความป้ายกำกับ จำลองการโต้ตอบของผู้ใช้ด้วย userEvent และตรวจสอบผลลัพธ์ที่มองเห็นได้

@testing-library/react: render และ userEvent เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

แนวคิดของ Testing Library

@testing-library สนับสนุนการทดสอบที่ใกล้เคียงกับวิธีที่ผู้ใช้โต้ตอบกับส่วนติดต่อผู้ใช้ ค้นหาโดยบทบาท ป้ายกำกับ และข้อความ ไม่ใช่ด้วยรายละเอียดการทำงานภายใน เช่น ชื่อคลาส CSS หรือส่วนภายในของคอมโพเนนต์

การติดตั้ง Testing Library

ติดตั้ง Testing Library สำหรับ React และแพ็กเกจ userEvent สำหรับจำลองการโต้ตอบของผู้ใช้

npm install -D @testing-library/react @testing-library/user-event @testing-library/jest-dom

render() — เมานต์คอมโพเนนต์

render(<Component />) เมานต์คอมโพเนนต์ใน DOM จำลอง และส่งคืนฟังก์ชันค้นหาสำหรับค้นหาองค์ประกอบ

import { render, screen } from '@testing-library/react';
import { Button } from './Button';

test('renders button with label', () => {
  render(<Button label="Submit" onClick={() => {}} />);
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

การค้นหาองค์ประกอบ

ควรใช้ฟังก์ชันค้นหาตามลำดับนี้: getByRole (เข้าถึงได้), getByLabelText, getByPlaceholderText, getByText และ getByDisplayValue ใช้ queryBy* เมื่อต้องการทดสอบว่าองค์ประกอบไม่มีอยู่ ใช้ findBy* สำหรับองค์ประกอบแบบอะซิงก์

// Prefer (accessible):
screen.getByRole('button', { name: /submit/i });
screen.getByLabelText('Email');

// For text content:
screen.getByText('Welcome!');

// Existence check:
expect(screen.queryByText('Error')).not.toBeInTheDocument();

// Async appearance:
await screen.findByText('Data loaded');

userEvent — การจำลองการกระทำของผู้ใช้

userEvent จำลองการโต้ตอบจริงของผู้ใช้ เช่น การพิมพ์ การคลิก และการนำทางด้วยแป้นพิมพ์ ซึ่งสมจริงกว่า fireEvent รุ่นเก่า

import userEvent from '@testing-library/user-event';

test('typing in input', async () => {
  const user = userEvent.setup();
  render(<SearchInput />);

  const input = screen.getByRole('textbox', { name: /search/i });
  await user.type(input, 'react hooks');

  expect(input).toHaveValue('react hooks');
});

การทดสอบการส่งแบบฟอร์ม

กรอกข้อมูลในช่องของแบบฟอร์มแล้วส่งแบบฟอร์ม ยืนยันผลลัพธ์จากสิ่งที่ผู้ใช้เห็นหลังจากส่งแบบฟอร์ม

test('submitting the login form', async () => {
  const onLogin = jest.fn();
  const user = userEvent.setup();
  render(<LoginForm onLogin={onLogin} />);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.type(screen.getByLabelText('Password'), 'secret123');
  await user.click(screen.getByRole('button', { name: /sign in/i }));

  expect(onLogin).toHaveBeenCalledWith({ email: 'alice@example.com', password: 'secret123' });
});

ตัวตรวจสอบแบบกำหนดเองของ jest-dom

@testing-library/jest-dom เพิ่มตัวตรวจสอบที่มีประโยชน์: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass() และ toHaveFocus()

การทดสอบการอัปเดตคอมโพเนนต์แบบอะซิงก์

ใช้ waitFor() หรือ findBy* สำหรับองค์ประกอบที่ปรากฏแบบอะซิงก์ (หลังการดึงข้อมูล หรือหลังช่วงเวลารอหมดลง)

test('shows data after loading', async () => {
  render(<UserList />);

  expect(screen.getByRole('status')).toHaveTextContent('Loading');

  const items = await screen.findAllByRole('listitem');
  expect(items).toHaveLength(3);
});

การทดสอบสถานะกำลังโหลดและข้อผิดพลาด

จำลองคำตอบจาก fetch เพื่อทดสอบสถานะที่แตกต่างกัน MSW (Mock Service Worker) เป็นเครื่องมือที่ดีที่สุดสำหรับจำลองคำตอบจาก API ในการทดสอบ

การทดสอบการเข้าถึง

Testing Library ส่งเสริมการเข้าถึงได้โดยธรรมชาติ หากคุณค้นหาองค์ประกอบด้วยบทบาทหรือป้ายกำกับไม่ได้ องค์ประกอบนั้นก็น่าจะเข้าถึงไม่ได้ ใช้ jest-axe เพื่อตรวจสอบการเข้าถึงแบบอัตโนมัติในการทดสอบ

อย่าทดสอบรายละเอียดการทำงานภายใน

หลีกเลี่ยง: การค้นหาด้วยชื่อคลาส CSS การนำเข้าสถานะภายในของคอมโพเนนต์ และการทดสอบว่าวิธีการเฉพาะถูกเรียกใช้ ให้ทดสอบพฤติกรรมจากมุมมองของผู้ใช้: สิ่งที่ผู้ใช้เห็นและสิ่งที่เกิดขึ้นเมื่อผู้ใช้โต้ตอบ

ตรวจสอบความเข้าใจ

ควรเลือกใช้ฟังก์ชันค้นหาของ Testing Library ใดเป็นอันดับแรกเมื่อต้องการค้นหาองค์ประกอบที่ผู้ใช้โต้ตอบได้?

ทบทวน: @testing-library/react

render() เมานต์คอมโพเนนต์ใน DOM จำลอง ค้นหาด้วยบทบาท ป้ายกำกับ และข้อความ ไม่ใช่ด้วยรายละเอียดการทำงานภายใน ใช้ userEvent.setup() สำหรับการโต้ตอบที่สมจริงของผู้ใช้ ใช้ findBy* สำหรับองค์ประกอบแบบอะซิงก์ ใช้ jest-dom เพื่อยืนยันผลลัพธ์ที่อ่านเข้าใจง่าย ทดสอบจากมุมมองของผู้ใช้: สิ่งที่ผู้ใช้เห็นและทำ คอมโพเนนต์ที่เข้าถึงได้ง่ายจะทดสอบได้ง่ายกว่า

คำถามที่พบบ่อย

บทเรียน “@testing-library/react: render และ userEvent” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “@testing-library/react: render และ userEvent” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “@testing-library/react: render และ userEvent”

เรนเดอร์คอมโพเนนต์ใน DOM จำลอง ค้นหาด้วยบทบาทและข้อความป้ายกำกับ จำลองการโต้ตอบของผู้ใช้ด้วย userEvent และตรวจสอบผลลัพธ์ที่มองเห็นได้ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “@testing-library/react: render และ userEvent” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การตั้งค่า Jest และการเขียนเทสต์พื้นฐาน
@testing-library/react: render และ userEvent
@testing-library/vue: การเมานต์คอมโพเนนต์
การจำลองโมดูลและการเรียก API

← กลับไปที่ Frontend Academy