@testing-library/svelte: render และ fireEvent
แสดงผลคอมโพเนนต์ในการทดสอบ ค้นหาใน DOM และจำลองการโต้ตอบของผู้ใช้
@testing-library/svelte: render และ fireEvent เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
Testing Library
@testing-library/svelte มีเครื่องมือสำหรับแสดงผล Component และโต้ตอบกับ Component เหล่านั้นเสมือนผู้ใช้
การแสดงผล
เมานต์ Component ลงใน DOM เสมือน
import { render } from "@testing-library/svelte";
const { getByText } = render(MyComp, { props: { name: "Ada" } });เมธอดสำหรับค้นหา
ใช้ getByText, getByRole และ getByLabelText เพื่อค้นหาองค์ประกอบเช่นเดียวกับที่ผู้ใช้ค้นหา
fireEvent
จำลองการโต้ตอบของผู้ใช้ เช่น click, input และ submit
import { fireEvent } from "@testing-library/svelte";
await fireEvent.click(getByRole("button"));ไลบรารี user-event
สำหรับการโต้ตอบที่สมจริงยิ่งขึ้น เช่น การพิมพ์และการนำทางด้วยแป้นพิมพ์ ให้ใช้ @testing-library/user-event
การอัปเดตแบบอะซิงโครนัส
หลังการโต้ตอบ ให้รอไมโครทาสก์เพื่อให้การอัปเดตของ Svelte ดำเนินการจนเสร็จ
การตรวจสอบยืนยัน
ใช้ expect ร่วมกับตัวจับคู่ของ jest-dom เช่น toBeInTheDocument และ toHaveAttribute
expect(getByText("Hello, Ada!")).toBeInTheDocument();พร็อพของ Component
ส่งพร็อพเป็นอาร์กิวเมนต์ตัวที่สองให้กับ render
อีเวนต์ของ Component
ทดสอบตัวส่งอีเวนต์โดยส่งสปายเป็นพร็อพคอลแบ็ก
สแนปชอต DOM
ถ่ายสแนปชอต HTML ที่แสดงผลแล้วเพื่อทดสอบการถดถอย
แนวทางปฏิบัติที่ดี
ทดสอบจากมุมมองของผู้ใช้ หลีกเลี่ยงการทดสอบสถานะภายในโดยตรง
ตรวจสอบความเข้าใจ
render ทำหน้าที่อะไร
สรุปทบทวน
ใช้ render + fireEvent + jest-dom เพื่อทดสอบ Component ของ Svelte ให้เสมือนการโต้ตอบของผู้ใช้จริง
คำถามที่พบบ่อย
บทเรียน “@testing-library/svelte: render และ fireEvent” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “@testing-library/svelte: render และ fireEvent” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “@testing-library/svelte: render และ fireEvent”
แสดงผลคอมโพเนนต์ในการทดสอบ ค้นหาใน DOM และจำลองการโต้ตอบของผู้ใช้ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “@testing-library/svelte: render และ fireEvent” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า Vitest สำหรับโปรเจกต์ Svelte
- @testing-library/svelte: render และ fireEvent
- การทดสอบ Store และการทำปฏิกิริยาตอบสนอง
- การจำลองโมดูลและ Fetch