การทดสอบ Vue
Vitest, Vue Test Utils, การทดสอบ component, mocking, snapshot testing, E2E ด้วย Playwright
1Vitest คืออะไร?
Vitest คืออะไร?
คำตอบ
Vitest เป็นเฟรมเวิร์กการทดสอบหน่วย (unit testing) สมัยใหม่ที่ออกแบบมาสำหรับโปรเจกต์ Vite โดยเฉพาะ มันมอบความเข้ากันได้กับโมดูล ESM แบบ native การรองรับ TypeScript ในตัว และการทำงานที่รวดเร็วมากด้วยการผสานรวมอย่างลึกซึ้งกับ Vite Vitest มี API ที่เข้ากันได้กับ Jest ทำให้ง่ายต่อการย้ายโปรเจกต์ที่มีอยู่เดิมพร้อมกับได้รับประสิทธิภาพที่เหนือกว่า
2Vue Test Utils มีบทบาทอย่างไร?
Vue Test Utils มีบทบาทอย่างไร?
คำตอบ
Vue Test Utils คือไลบรารีทดสอบอย่างเป็นทางการสำหรับ Vue.js ที่มอบเครื่องมือสำหรับ mount และโต้ตอบกับ component Vue ในสภาพแวดล้อมการทดสอบ มันเปิดเผยเมธอดอย่าง mount และ shallowMount สำหรับการเรนเดอร์ component รวมถึง API สำหรับจำลองการโต้ตอบของผู้ใช้ ตรวจสอบ props จับ event ที่ถูก emit และตรวจสอบ DOM ที่เรนเดอร์ ไลบรารีนี้จำเป็นอย่างยิ่งสำหรับการทดสอบ component Vue แบบแยกส่วน
3ความแตกต่างหลักระหว่าง mount และ shallowMount คืออะไร?
ความแตกต่างหลักระหว่าง mount และ shallowMount คืออะไร?
คำตอบ
mount เรนเดอร์ component ทั้งหมดพร้อมกับ component ลูกทั้งหมดแบบเรียกซ้ำ สร้างเป็น DOM tree ที่สมบูรณ์ ส่วน shallowMount เรนเดอร์เฉพาะ component ระดับบนสุดโดยแทนที่ component ลูกทั้งหมดด้วย stub ว่างโดยอัตโนมัติ ใช้ shallowMount สำหรับ unit test ที่เข้มงวดซึ่งการแยกส่วนเป็นสิ่งสำคัญที่สุด และใช้ mount สำหรับ integration test ที่ต้องตรวจสอบการโต้ตอบระหว่าง component แม่-ลูก
จะกำหนดค่า Vitest ในโปรเจกต์ Vue/Nuxt ได้อย่างไร?
เมธอดใดของ wrapper ที่ช่วยให้ค้นหาองค์ประกอบโดยใช้ CSS selector?
+17 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ Vue.js / Nuxt.js อื่นๆ
พื้นฐาน JavaScript
JavaScript สมัยใหม่ (ES6+)
พื้นฐาน Vue
คอมโพเนนต์ Vue
Vue Router
Pinia State Management
Vuex (Legacy)
Composition API
ระบบ Reactivity ของ Vue
พื้นฐาน Nuxt
การดึงข้อมูล (Data Fetching) ใน Nuxt
SSR และ SSG ใน Nuxt
Server Routes ของ Nuxt
โมดูล Nuxt
Composables ใน Vue
ฟอร์มและการตรวจสอบ Vue
การจัดการสถานะใน Nuxt
การ Deploy Nuxt และ CI/CD
ประสิทธิภาพของ Vue
รูปแบบขั้นสูงของ Vue
TypeScript กับ Vue
การยืนยันตัวตน Nuxt
SEO ด้วย Nuxt
การทำ Internationalization ใน Nuxt
สถาปัตยกรรม Vue
ความปลอดภัยของ Nuxt
ระบบนิเวศ Vue
การย้าย Vue 2→3 & Nuxt 2→3
เชี่ยวชาญ Vue.js / Nuxt.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี