การเมาท์และค้นหาคอมโพเนนต์
mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() และ data-testid
การเมาท์และค้นหาคอมโพเนนต์ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
เรนเดอร์คอมโพเนนต์ในการทดสอบ
หากต้องการทดสอบคอมโพเนนต์ คุณต้องเรนเดอร์ลงใน DOM ของ jsdom แล้วตรวจสอบผลลัพธ์ @vue/test-utils มี mount และออบเจ็กต์ wrapper พร้อมตัวช่วยค้นหาให้ใช้
mount: เรนเดอร์ทั้งหมด
mount จะเรนเดอร์คอมโพเนนต์และคอมโพเนนต์ลูกทั้งหมดจริง ๆ ให้ใช้เมื่อพฤติกรรมขึ้นอยู่กับการที่คอมโพเนนต์ลูกเรนเดอร์ผลลัพธ์จริง
import { mount } from "@vue/test-utils"
import Card from "./Card.vue"
const wrapper = mount(Card, {
props: { title: "Hello" },
})shallowMount: จำลองคอมโพเนนต์ลูก
shallowMount จะเรนเดอร์คอมโพเนนต์ แต่แทนที่คอมโพเนนต์ลูกด้วยสตับน้ำหนักเบา วิธีนี้จะแยกหน่วยที่กำลังทดสอบออกจากรายละเอียดภายในของคอมโพเนนต์ลูก
import { shallowMount } from "@vue/test-utils"
import Page from "./Page.vue"
const wrapper = shallowMount(Page)
// child components appear as <child-stub />mount เทียบกับ shallowMount
เลือกตามจุดประสงค์:
- mount — รูปแบบการทดสอบการผสานรวม คุณสนใจว่าคอมโพเนนต์ลูกเรนเดอร์อย่างไร
- shallowMount — รูปแบบการทดสอบหน่วย คุณทดสอบเฉพาะตรรกะและเทมเพลตของคอมโพเนนต์นี้
การเมานต์แบบตื้นทำงานได้เร็วกว่า และหลีกเลี่ยงความล้มเหลวที่ส่งต่อกันจากข้อผิดพลาดของคอมโพเนนต์ลูก
find: การค้นหาที่ไม่บังคับว่าต้องพบ
wrapper.find(selector) รับตัวเลือก CSS และคืนค่าเป็น wrapper หากไม่พบสิ่งใด ผลลัพธ์ของ exists() จะเป็น false แทนที่จะทำให้เกิดข้อผิดพลาด
const title = wrapper.find("h1")
expect(title.exists()).toBe(true)
expect(title.text()).toBe("Hello")get: การค้นหาที่ต้องพบ
wrapper.get(selector) คล้ายกับ find แต่จะโยนข้อผิดพลาดหากไม่พบองค์ประกอบ ให้ใช้เมื่อองค์ประกอบนั้นต้องมีอยู่เสมอ เพราะข้อความข้อผิดพลาดจะชัดเจนกว่าการเข้าถึงค่า null ในภายหลัง
const button = wrapper.get("button.submit")
// throws immediately with a helpful message if absentเลือก find หรือ get
ใช้ get กับองค์ประกอบที่ควรมีอยู่เสมอ เพื่อยืนยันเนื้อหาขององค์ประกอบ ใช้ find เมื่อต้องการทดสอบว่ามีหรือไม่มีองค์ประกอบ เช่น แบนเนอร์ข้อผิดพลาดที่เรนเดอร์เฉพาะบางครั้ง
expect(wrapper.find(".error").exists()).toBe(false)
const label = wrapper.get("label")
expect(label.text()).toBe("Email")findAll: หลายองค์ประกอบ
wrapper.findAll(selector) จะคืนค่าอาร์เรย์ของ wrapper สำหรับทุกผลการค้นหาที่ตรงกัน เหมาะอย่างยิ่งสำหรับตรวจสอบจำนวนรายการและวนซ้ำผ่านแถวต่าง ๆ
const items = wrapper.findAll("li")
expect(items).toHaveLength(3)
expect(items[0].text()).toBe("First")อ่านข้อความด้วย text()
wrapper.text() จะคืนค่าเนื้อหาข้อความที่ตัดช่องว่างส่วนเกินและต่อเข้าด้วยกันขององค์ประกอบนั้น รวมถึงองค์ประกอบลูกด้วย เหมาะสำหรับตรวจสอบข้อความที่มองเห็นได้โดยไม่ต้องกังวลกับมาร์กอัปที่ตรงกันทุกประการ
expect(wrapper.text()).toContain("3 results found")ตรวจสอบมาร์กอัปด้วย html()
wrapper.html() จะคืนค่าสตริง HTML ที่เรนเดอร์แล้ว มีประโยชน์สำหรับแก้ไขข้อผิดพลาดของการทดสอบที่ล้มเหลว หรือตรวจสอบแอตทริบิวต์และโครงสร้าง
console.log(wrapper.html())
// <div class="card"><h1>Hello</h1></div>
expect(wrapper.html()).toContain("class=\"card\"")ค้นหาคอมโพเนนต์ลูก
นอกเหนือจากตัวเลือก CSS แล้ว find และ findComponent ยังรับการอ้างอิงคอมโพเนนต์เพื่อค้นหาอินสแตนซ์ของคอมโพเนนต์ลูกที่ต้องการได้
import { findComponent } from "@vue/test-utils"
import Avatar from "./Avatar.vue"
const avatar = wrapper.findComponent(Avatar)
expect(avatar.exists()).toBe(true)ตรวจสอบความเข้าใจ
ตรวจสอบความเข้าใจเรื่องการค้นหาด้วย Test Utils
สรุปทบทวน
คุณได้เรียนรู้วิธีเรนเดอร์และค้นหาคอมโพเนนต์แล้ว:
mountเรนเดอร์คอมโพเนนต์ลูกจริง ส่วนshallowMountใช้สตับแทนเพื่อแยกการทดสอบfindคืนค่า wrapper ที่อาจว่างเปล่า ส่วนgetจะโยนข้อผิดพลาดเมื่อไม่พบองค์ประกอบfindAllคืนค่าอาร์เรย์สำหรับรายการต่าง ๆtext()อ่านข้อความที่มองเห็นได้ ส่วนhtml()คืนมาร์กอัปที่เรนเดอร์แล้วfindComponentค้นหาคอมโพเนนต์ลูกที่ต้องการ
คำถามที่พบบ่อย
บทเรียน “การเมาท์และค้นหาคอมโพเนนต์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเมาท์และค้นหาคอมโพเนนต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเมาท์และค้นหาคอมโพเนนต์”
mount(), shallowMount(), wrapper.find(), wrapper.findAll(), getByText() และ data-testid คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การเมาท์และค้นหาคอมโพเนนต์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า Vitest สำหรับโปรเจกต์ Vue
- การเมาท์และค้นหาคอมโพเนนต์
- การทดสอบการโต้ตอบและเหตุการณ์ของผู้ใช้
- การจำลองคอมโพสิเบิล สโตร์ และ API