0Pricing
Vue Academy · บทเรียน

การทดสอบหน่วยด้วย Vue Test Utils

เขียนการทดสอบหน่วยสำหรับส่วนประกอบด้วย Vue Test Utils

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

การทดสอบคอมโพเนนต์

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

การเมาต์

ฟังก์ชัน mount จะแสดงผลคอมโพเนนต์อย่างสมบูรณ์ รวมถึงคอมโพเนนต์ลูกทั้งหมด ฟังก์ชันนี้คืนค่าออบเจ็กต์ wrapper ที่มีตัวช่วยสำหรับค้นหาและโต้ตอบกับผลลัพธ์ที่แสดงผล

import { mount } from "@vue/test-utils"
import Counter from "./Counter.vue"

const wrapper = mount(Counter)

shallowMount

shallowMount จะแสดงผลคอมโพเนนต์ แต่แทนที่คอมโพเนนต์ลูกด้วยสตับ วิธีนี้แยกคอมโพเนนต์ที่กำลังทดสอบออกจากคอมโพเนนต์ลูก จึงเหมาะอย่างยิ่งสำหรับการทดสอบหน่วยที่แท้จริง

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

const wrapper = shallowMount(ParentComponent)
// child components are stubbed out

การเมาต์เทียบกับ shallowMount

ใช้ mount เมื่อต้องการทดสอบคอมโพเนนต์ร่วมกับคอมโพเนนต์ลูก และใช้ shallowMount เมื่อต้องการแยกทดสอบเฉพาะคอมโพเนนต์นี้ การเมาต์แบบตื้นช่วยให้การทดสอบมุ่งเน้นและทำงานได้รวดเร็ว

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

ใช้ wrapper.find กับตัวเลือก CSS เพื่อค้นหาองค์ประกอบ find จะคืนค่า wrapper ขององค์ประกอบนั้น ซึ่งคุณสามารถตรวจสอบหรือโต้ตอบได้

const button = wrapper.find("button")
const title = wrapper.find(".title")

การตรวจสอบผลลัพธ์ที่แสดงผล

ตรวจสอบข้อความหรือ HTML ที่แสดงผล เพื่อยืนยันว่าคอมโพเนนต์แสดงสิ่งที่คุณคาดไว้

test("renders the message", () => {
  const wrapper = mount(Greeting, {
    props: { name: "Sam" }
  })
  expect(wrapper.text()).toContain("Hello, Sam")
})

การทดสอบพร็อพส์

ส่งพร็อพส์ผ่านตัวเลือกการเมาต์ แล้วตรวจสอบว่าคอมโพเนนต์แสดงผลพร็อพส์เหล่านั้นอย่างถูกต้อง วิธีนี้ยืนยันว่าคอมโพเนนต์ตอบสนองต่อข้อมูลป้อนเข้าของตน

const wrapper = mount(UserCard, {
  props: { user: { name: "Lin", role: "Admin" } }
})
expect(wrapper.text()).toContain("Lin")
expect(wrapper.text()).toContain("Admin")

การกระตุ้นเหตุการณ์

จำลองการกระทำของผู้ใช้ด้วย trigger ฟังก์ชันนี้คืนค่าพรอมิส ดังนั้นให้รอผลลัพธ์เพื่อให้ Vue อัปเดต DOM ก่อนตรวจสอบ

test("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.find("button").trigger("click")
  expect(wrapper.text()).toContain("1")
})

การกำหนดค่าป้อนเข้า

ใช้ setValue กับ wrapper ของช่องป้อนเข้าเพื่อจำลองการพิมพ์ จากนั้นตรวจสอบพฤติกรรมที่เกิดขึ้น

const input = wrapper.find("input")
await input.setValue("hello@example.com")
expect(wrapper.vm.email).toBe("hello@example.com")

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

เมื่อคอมโพเนนต์ส่งเหตุการณ์ออกมา wrapper.emitted จะบันทึกเหตุการณ์นั้น ให้ตรวจสอบว่าเหตุการณ์ที่ถูกต้องถูกส่งออกมาพร้อมข้อมูลส่งแนบที่ถูกต้อง

test("emits submit with form data", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.find("form").trigger("submit")
  expect(wrapper.emitted("submit")).toBeTruthy()
  expect(wrapper.emitted("submit")[0]).toEqual([{ user: "" }])
})

การประกอบการทดสอบ

การทดสอบคอมโพเนนต์ที่สมบูรณ์จะเมาต์คอมโพเนนต์ โต้ตอบกับคอมโพเนนต์ และตรวจสอบผลลัพธ์หรือเหตุการณ์ที่ส่งออก

import { mount } from "@vue/test-utils"
import TodoInput from "./TodoInput.vue"

test("adds a todo", async () => {
  const wrapper = mount(TodoInput)
  await wrapper.find("input").setValue("Buy milk")
  await wrapper.find("button").trigger("click")
  expect(wrapper.emitted("add")[0]).toEqual(["Buy milk"])
})

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

ทดสอบความรู้ของคุณเกี่ยวกับ Vue Test Utils

สรุปทบทวน

Vue Test Utils แสดงผลคอมโพเนนต์ด้วย mount (โครงสร้างทั้งหมด) หรือ shallowMount (คอมโพเนนต์ลูกที่แทนด้วยสตับ) ค้นหาด้วย find จำลองการกระทำด้วย trigger และ setValue (โดยรอผลลัพธ์) และตรวจสอบด้วย text() หรือ emitted() ส่ง props ผ่านตัวเลือกการเมาต์ ถัดไป คุณจะทดสอบทั้งแอปตั้งแต่ต้นจนจบ

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

บทเรียน “การทดสอบหน่วยด้วย Vue Test Utils” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การทดสอบหน่วยด้วย Vue Test Utils”

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

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

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

บทเรียน “การทดสอบหน่วยด้วย Vue Test Utils” ใช้เวลานานแค่ไหน

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

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

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

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

  1. รู้จักเฟรมเวิร์กการทดสอบ
  2. การทดสอบหน่วยด้วย Vue Test Utils
  3. การทดสอบตั้งแต่ต้นจนจบ
← กลับไปที่ Vue Academy