# การทดสอบ Vue (Vue.js / Nuxt.js)

> Vitest, Vue Test Utils, การทดสอบ component, mocking, snapshot testing, E2E ด้วย Playwright

- 20 คำถามสัมภาษณ์
- Mid-Level
- [คำถามสัมภาษณ์: Vue.js / Nuxt.js](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions.md)

## 1. Vitest คืออะไร?

**คำตอบ**

Vitest เป็นเฟรมเวิร์กการทดสอบหน่วย (unit testing) สมัยใหม่ที่ออกแบบมาสำหรับโปรเจกต์ Vite โดยเฉพาะ มันมอบความเข้ากันได้กับโมดูล ESM แบบ native การรองรับ TypeScript ในตัว และการทำงานที่รวดเร็วมากด้วยการผสานรวมอย่างลึกซึ้งกับ Vite Vitest มี API ที่เข้ากันได้กับ Jest ทำให้ง่ายต่อการย้ายโปรเจกต์ที่มีอยู่เดิมพร้อมกับได้รับประสิทธิภาพที่เหนือกว่า

## 2. 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 เรนเดอร์ component ทั้งหมดพร้อมกับ component ลูกทั้งหมดแบบเรียกซ้ำ สร้างเป็น DOM tree ที่สมบูรณ์ ส่วน shallowMount เรนเดอร์เฉพาะ component ระดับบนสุดโดยแทนที่ component ลูกทั้งหมดด้วย stub ว่างโดยอัตโนมัติ ใช้ shallowMount สำหรับ unit test ที่เข้มงวดซึ่งการแยกส่วนเป็นสิ่งสำคัญที่สุด และใช้ mount สำหรับ integration test ที่ต้องตรวจสอบการโต้ตอบระหว่าง component แม่-ลูก

## มีอีก 17 คำถาม

- จะกำหนดค่า Vitest ในโปรเจกต์ Vue/Nuxt ได้อย่างไร?
- เมธอดใดของ wrapper ที่ช่วยให้ค้นหาองค์ประกอบโดยใช้ CSS selector?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ Vue.js / Nuxt.js อื่นๆ

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/javascript-fundamentals.md): 20 คำถาม, Junior
- [JavaScript สมัยใหม่ (ES6+)](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/es6-modern-javascript.md): 20 คำถาม, Junior
- [พื้นฐาน Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-basics.md): 22 คำถาม, Junior
- [คอมโพเนนต์ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-components.md): 20 คำถาม, Junior
- [Vue Router](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-router.md): 18 คำถาม, Junior
- [Pinia State Management](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/pinia-state-management.md): 20 คำถาม, Junior
- [Vuex (Legacy)](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vuex-legacy.md): 15 คำถาม, Mid-Level
- [Composition API](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/composition-api.md): 24 คำถาม, Mid-Level
- [ระบบ Reactivity ของ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-reactivity.md): 20 คำถาม, Mid-Level
- [พื้นฐาน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-fundamentals.md): 22 คำถาม, Mid-Level
- [การดึงข้อมูล (Data Fetching) ใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-data-fetching.md): 20 คำถาม, Mid-Level
- [SSR และ SSG ใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-ssr-ssg.md): 22 คำถาม, Mid-Level
- [Server Routes ของ Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-server-routes.md): 20 คำถาม, Mid-Level
- [โมดูล Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-modules.md): 18 คำถาม, Mid-Level
- [Composables ใน Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-composables.md): 20 คำถาม, Mid-Level
- [ฟอร์มและการตรวจสอบ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-forms-validation.md): 20 คำถาม, Mid-Level
- [การจัดการสถานะใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-state-management.md): 18 คำถาม, Mid-Level
- [การ Deploy Nuxt และ CI/CD](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-deployment-cicd.md): 22 คำถาม, Mid-Level
- [ประสิทธิภาพของ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-performance.md): 22 คำถาม, Senior
- [รูปแบบขั้นสูงของ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-advanced-patterns.md): 24 คำถาม, Senior
- [TypeScript กับ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/typescript-vue.md): 22 คำถาม, Senior
- [การยืนยันตัวตน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-auth.md): 20 คำถาม, Senior
- [SEO ด้วย Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-seo.md): 20 คำถาม, Senior
- [การทำ Internationalization ใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-i18n.md): 18 คำถาม, Senior
- [สถาปัตยกรรม Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-architecture.md): 22 คำถาม, Senior
- [ความปลอดภัยของ Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-security.md): 20 คำถาม, Senior
- [ระบบนิเวศ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-ecosystem.md): 18 คำถาม, Senior
- [การย้าย Vue 2→3 & Nuxt 2→3](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/migration-vue2-vue3-nuxt2-nuxt3.md): 22 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-testing