การค้นหา อีเวนต์ และการตรวจสอบ — ฟอร์มกับ UI แบบอะซิงโครนัส
ใช้การค้นหาแบบ getBy/findBy ใช้ user-event สำหรับการพิมพ์/คลิก และใช้การตรวจสอบของ jest-dom ทดสอบฟอร์มและหน้าจอแบบอะซิงโครนัสอย่างมั่นใจ
การค้นหา อีเวนต์ และการตรวจสอบ — ฟอร์มกับ UI แบบอะซิงโครนัส เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
การทดสอบที่เน้นผู้ใช้
เป้าหมาย: ทดสอบเสมือนผู้ใช้
- คิวรี: getBy*/findBy*
- เหตุการณ์: user-event (คลิก พิมพ์)
- การตรวจสอบยืนยัน: jest-dom
คิวรี: เลือกให้เหมาะสม
- getBy*: ทำงานแบบซิงโครนัส ล้มเหลวเมื่อไม่พบ
- findBy*: ทำงานแบบอะซิงโครนัสและรอผล
- queryBy*: คืนค่า null เมื่อไม่พบ
- เลือกใช้ บทบาท/ป้ายกำกับ มากกว่ารหัสการทดสอบ
สาธิต: แบบฟอร์มเข้าสู่ระบบที่เข้าถึงได้
แบบฟอร์มที่มีป้ายกำกับและปุ่มส่ง เหมาะสำหรับ getByLabelText, getByRole และการพิมพ์โดยผู้ใช้
<div id="root"></div>
สาธิต: รายการแบบอะซิงโครนัส (กำลังโหลด → รายการ)
จำลองการดึงข้อมูลแบบอะซิงโครนัส: แสดงตัวโหลดแล้วจึงแสดงรายการ การทดสอบควรใช้ findBy* หรือ waitFor
<div id="root"></div>
การตรวจสอบยืนยันและเหตุการณ์
- toBeInTheDocument, toBeDisabled, toHaveTextContent
- ใช้ findBy* สำหรับส่วนติดต่อผู้ใช้แบบอะซิงโครนัส
- เลือกใช้ user-event แทน fireEvent
รูปแบบและข้อควรระวัง
รูปแบบ:
- จัดเตรียม → ดำเนินการ (user-event) → ตรวจสอบยืนยัน
- แบบอะซิงโครนัส: ใช้ await findBy* หรือ waitFor
- หลีกเลี่ยงระยะหมดเวลาที่กำหนดขึ้นโดยไม่มีเหตุผล และทำให้การทดสอบทำงานได้รวดเร็ว
แนวปฏิบัติที่ดีในการตรวจสอบแบบอะซิงโครนัส
ทบทวน
ทบทวน: เลือกใช้คิวรีตามบทบาท/ป้ายกำกับ ขับเคลื่อนส่วนติดต่อผู้ใช้ด้วย user-event และตรวจสอบยืนยันด้วย jest-dom สำหรับส่วนติดต่อผู้ใช้แบบอะซิงโครนัส ให้ใช้ await findBy* หรือครอบด้วย waitFor
คำถามที่พบบ่อย
บทเรียน “การค้นหา อีเวนต์ และการตรวจสอบ — ฟอร์มกับ UI แบบอะซิงโครนัส” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การค้นหา อีเวนต์ และการตรวจสอบ — ฟอร์มกับ UI แบบอะซิงโครนัส” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การค้นหา อีเวนต์ และการตรวจสอบ — ฟอร์มกับ UI แบบอะซิงโครนัส”
ใช้การค้นหาแบบ getBy/findBy ใช้ user-event สำหรับการพิมพ์/คลิก และใช้การตรวจสอบของ jest-dom ทดสอบฟอร์มและหน้าจอแบบอะซิงโครนัสอย่างมั่นใจ คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “การค้นหา อีเวนต์ และการตรวจสอบ — ฟอร์มกับ UI แบบอะซิงโครนัส” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- React Testing Library + การตั้งค่า Vitest/Jest
- การค้นหา อีเวนต์ และการตรวจสอบ — ฟอร์มกับ UI แบบอะซิงโครนัส
- การจำลองการดึงข้อมูลและตัวจับเวลา