Vue Academy · บทเรียน

การทดสอบการโต้ตอบและเหตุการณ์ของผู้ใช้

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() และ flushPromises() แบบอะซิงโครนัส

บทเรียน 3 จาก 413 ขั้นตอน

การทดสอบการโต้ตอบและเหตุการณ์ของผู้ใช้ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

จำลองพฤติกรรมของผู้ใช้

นอกเหนือจากการเรนเดอร์แล้ว การทดสอบควรเลียนแบบสิ่งที่ผู้ใช้ทำ เช่น คลิกปุ่ม พิมพ์ลงในช่องป้อนข้อมูล และส่งแบบฟอร์ม wrapper ของ @vue/test-utils มีเมธอดสำหรับส่งเหตุการณ์ DOM และอัปเดต Vue ในภายหลัง

trigger สำหรับเหตุการณ์คลิก

wrapper.trigger("click") จะทำให้เกิดการคลิกบนองค์ประกอบ เนื่องจากการคลิกนี้อัปเดต DOM เมธอดจึงคืนค่าเป็นพรอมิส โปรดใช้ await เพื่อให้การตรวจสอบเห็นผลลัพธ์

const button = wrapper.get("button")
await button.trigger("click")
expect(wrapper.text()).toContain("Clicked once")

เหตุใดการทดสอบจึงเป็นแบบอะซิงก์

Vue อัปเดต DOM แบบอะซิงก์ หลังการโต้ตอบ สถานะใหม่จะยังมองไม่เห็นจนกว่าจะถึงรอบการทำงานถัดไป การรอพรอมิสจาก trigger ทำให้ DOM อัปเดตเสร็จก่อนที่คุณจะตรวจสอบ

it("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.get("button").trigger("click")
  expect(wrapper.get(".count").text()).toBe("1")
})

setValue สำหรับช่องป้อนข้อมูล

หากต้องการพิมพ์ลงในช่อง ให้ใช้ wrapper.setValue(value) กับ wrapper ของช่องป้อนข้อมูล เมธอดนี้จะกำหนดค่าและส่งเหตุการณ์ input เพื่อให้ v-model อัปเดต

const input = wrapper.get("input")
await input.setValue("hello@example.com")
expect(input.element.value).toBe("hello@example.com")

ช่องทำเครื่องหมายและรายการเลือก

setValue จะปรับการทำงานตามองค์ประกอบที่ใช้ ให้ส่งค่าบูลีนสำหรับช่องทำเครื่องหมาย และส่งค่าของตัวเลือกสำหรับรายการเลือก

await wrapper.get("input[type=checkbox]").setValue(true)
await wrapper.get("select").setValue("tr")

ตรวจสอบเหตุการณ์ที่ส่งออก

คอมโพเนนต์สื่อสารขึ้นไปผ่านเหตุการณ์ที่ส่งออก wrapper.emitted() จะคืนค่าระเบียนของเหตุการณ์ทั้งหมดที่คอมโพเนนต์ส่งออก โดยจัดกลุ่มตามชื่อ

await wrapper.get("button").trigger("click")
expect(wrapper.emitted()).toHaveProperty("submit")

ตรวจสอบข้อมูลที่ส่งออก

wrapper.emitted("name") จะคืนค่าอาร์เรย์ของอาร์เรย์อาร์กิวเมนต์จากการส่งออกแต่ละครั้ง อาร์กิวเมนต์แรกของการส่งออกครั้งแรกคือ emitted("name")[0][0]

await wrapper.get("button").trigger("click")
const events = wrapper.emitted("submit")
expect(events).toHaveLength(1)
expect(events[0][0]).toEqual({ email: "a@b.com" })

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

นำส่วนต่าง ๆ มารวมกัน: กรอกข้อมูลในช่อง ส่งแบบฟอร์ม แล้วตรวจสอบข้อมูลที่ส่งออก

it("emits submit with the email", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.get("input").setValue("a@b.com")
  await wrapper.get("form").trigger("submit.prevent")
  expect(wrapper.emitted("submit")[0][0]).toEqual({ email: "a@b.com" })
})

การทำงานแบบอะซิงก์ในคอมโพเนนต์

ตัวจัดการจำนวนมากเรียกใช้ API และอัปเดตสถานะเมื่อพรอมิสเสร็จสมบูรณ์ ไมโครทาสก์อาจยังไม่ทำงานเมื่อการตรวจสอบของคุณเริ่มขึ้น ดังนั้นคุณจึงต้องรอ

async function load() {
  loading.value = true
  data.value = await fetchData()
  loading.value = false
}

flushPromises

flushPromises จาก Test Utils จะทำให้ไมโครทาสก์ที่ค้างอยู่ทั้งหมดเสร็จสมบูรณ์ (คอลแบ็กที่ทำงานต่อจากพรอมิส) ให้รอเมธอดนี้หลังเรียกใช้การทำงานแบบอะซิงก์ เพื่อให้พรอมิสที่เสร็จสมบูรณ์และการอัปเดต DOM ที่เกิดขึ้นตามมาถูกนำไปใช้

import { flushPromises } from "@vue/test-utils"

await wrapper.get("button").trigger("click")
await flushPromises()
expect(wrapper.text()).toContain("Loaded")

รวมการทดสอบแบบอะซิงก์

รูปแบบการทำงานคือ เมานต์ โต้ตอบ await flushPromises() แล้วตรวจสอบ ทำเครื่องหมายฟังก์ชันการทดสอบเป็น async เพื่อให้คุณใช้ await ได้ตลอดการทดสอบ

it("shows results after fetch", async () => {
  const wrapper = mount(SearchBox)
  await wrapper.get("input").setValue("vue")
  await wrapper.get("form").trigger("submit.prevent")
  await flushPromises()
  expect(wrapper.findAll("li")).toHaveLength(2)
})

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

ตรวจสอบความเข้าใจเรื่องการทดสอบการโต้ตอบ

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

คุณได้เรียนรู้การทดสอบการโต้ตอบและเหตุการณ์แล้ว:

trigger("click") ทำให้เกิดเหตุการณ์ โปรดรอเมธอดนี้ เพราะ Vue อัปเดตแบบอะซิงก์
setValue กำหนดค่าช่องป้อนข้อมูล/ช่องทำเครื่องหมาย/รายการเลือก และส่งเหตุการณ์ input สำหรับ v-model
wrapper.emitted() บันทึกเหตุการณ์ที่ส่งออก ส่วน emitted("name")[0][0] จะอ่านข้อมูลที่ส่งออกครั้งแรก
สำหรับตัวจัดการแบบอะซิงก์ ให้ใช้ await flushPromises() ก่อนตรวจสอบ
ทำเครื่องหมายการทดสอบเป็น async เพื่อใช้ await

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 42
บทเรียน: 156

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “การทดสอบการโต้ตอบและเหตุการณ์ของผู้ใช้” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การทดสอบการโต้ตอบและเหตุการณ์ของผู้ใช้” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การทดสอบการโต้ตอบและเหตุการณ์ของผู้ใช้”

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() และ flushPromises() แบบอะซิงโครนัส คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “การทดสอบการโต้ตอบและเหตุการณ์ของผู้ใช้” ใช้เวลานานแค่ไหน

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

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

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

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

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