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

การตั้งค่า Vitest สำหรับโปรเจกต์ Vue

vitest.config.ts สภาพแวดล้อม jsdom, @vue/test-utils, การวัดความครอบคลุมด้วย v8 และสคริปต์ทดสอบ

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

ทำไมจึงใช้ Vitest กับ Vue

Vitest เป็นตัวเรียกใช้การทดสอบที่รวดเร็ว ซึ่งสร้างขึ้นบน Vite เนื่องจากโครงการ Vue 3 ใช้ Vite อยู่แล้ว Vitest จึงใช้การตั้งค่าและการแปลงข้อมูลชุดเดียวกันได้ ทำให้ไม่ต้องมีไปป์ไลน์การสร้างแยกสำหรับการทดสอบ

คุณจะได้ API คล้าย Jest พร้อมการรองรับ ESM และ TypeScript ในตัว

ติดตั้งเครื่องมือ

เพิ่ม Vitest ยูทิลิตีการทดสอบของ Vue และ jsdom ซึ่งเป็น DOM ที่มีลักษณะเหมือนเบราว์เซอร์สำหรับ Node

// terminal
// npm install -D vitest @vue/test-utils jsdom @vitest/coverage-v8

สภาพแวดล้อม jsdom

คอมโพเนนต์ต้องมี DOM สำหรับเมานต์ Node ไม่มี DOM ดังนั้นการทดสอบจึงทำงานใน jsdom ซึ่งจำลอง API ของเบราว์เซอร์ ให้ตั้งค่านี้เป็นสภาพแวดล้อมการทดสอบในไฟล์การตั้งค่า

// vitest.config.ts
import { defineConfig } from "vitest/config"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: "jsdom",
  },
})

เปิดใช้โกลบอล

โดยค่าเริ่มต้น คุณต้องนำเข้า describe it และ expect ในทุกไฟล์ การตั้งค่า globals: true จะทำให้เรียกใช้สิ่งเหล่านี้ได้ทุกที่โดยไม่ต้องนำเข้า เช่นเดียวกับ Jest

// vitest.config.ts
export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
  },
})

ชนิด TypeScript สำหรับโกลบอล

เมื่อใช้โกลบอลร่วมกับ TypeScript ให้เพิ่มชนิดของ Vitest เพื่อให้โปรแกรมแก้ไขโค้ดรู้จัก describe และสิ่งที่เกี่ยวข้อง

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

ไฟล์การทดสอบแรก

Vitest จะค้นหาไฟล์ที่ลงท้ายด้วย .test.ts หรือ .spec.ts เมื่อเปิดใช้โกลบอลแล้ว คุณสามารถเขียนการทดสอบได้โดยตรง

// math.test.ts
describe("add", () => {
  it("sums two numbers", () => {
    expect(1 + 2).toBe(3)
  })
})

เมานต์คอมโพเนนต์

เมื่อติดตั้ง @vue/test-utils และตั้งค่า jsdom แล้ว คุณสามารถเมานต์คอมโพเนนต์จริงในการทดสอบ และตรวจสอบผลลัพธ์ที่เรนเดอร์ได้

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

it("renders the greeting", () => {
  const wrapper = mount(Hello, { props: { name: "Ada" } })
  expect(wrapper.text()).toContain("Hello, Ada")
})

เพิ่มความครอบคลุม

ความครอบคลุมจะแสดงว่าเส้นใดบ้างที่การทดสอบของคุณเรียกใช้งาน Vitest รองรับตัวให้บริการ v8 ซึ่งรวดเร็วและทำงานในตัว ให้ตั้งค่าภายใต้ test.coverage

// vitest.config.ts
export default defineConfig({
  test: {
    coverage: {
      provider: "v8",
      reporter: ["text", "html"],
    },
  },
})

รายงานความครอบคลุมแบบ HTML

ตัวรายงาน html จะเขียนรายงานที่เปิดดูและเรียกดูได้ (ค่าเริ่มต้นคือ coverage/index.html) เปิดรายงานเพื่อดูความครอบคลุมของเส้นและแขนงแยกตามไฟล์ พร้อมไฮไลต์ส่วนที่ยังขาด

// after running coverage:
// open coverage/index.html in a browser
// red lines = not executed by any test

สคริปต์ใน package.json

เชื่อมต่อสคริปต์ที่เรียกใช้ได้สะดวก test จะเรียกใช้ชุดการทดสอบ ส่วน coverage จะเรียกใช้พร้อมแฟล็กความครอบคลุม

// package.json
{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "coverage": "vitest run --coverage"
  }
}

โหมดเฝ้าดูเทียบกับโหมดเรียกใช้

vitest แบบปกติจะทำงานในโหมดเฝ้าดู โดยเรียกใช้การทดสอบที่ได้รับผลกระทบใหม่เมื่อบันทึกไฟล์ เหมาะอย่างยิ่งระหว่างการพัฒนา ใน CI คุณต้องการให้ทำงานเพียงรอบเดียวแล้วจบการทำงาน ดังนั้นให้ใช้ vitest run

// local dev:  npm run test     (watch)
// CI pipeline: npm run test:run (one pass, exits)

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

ตรวจสอบความเข้าใจเรื่องการตั้งค่า Vitest

สรุปทบทวน

คุณได้ตั้งค่า Vitest สำหรับโครงการ Vue แล้ว:

  • ติดตั้ง vitest @vue/test-utils jsdom และตัวให้บริการความครอบคลุม
  • ตั้งค่า environment: "jsdom" เพื่อให้คอมโพเนนต์มี DOM
  • globals: true ช่วยไม่ให้ต้องนำเข้าตัวช่วยการทดสอบ และให้เพิ่ม vitest/globals ลงในชนิดของ tsconfig
  • ตั้งค่าความครอบคลุมด้วยตัวให้บริการ v8 และตัวรายงาน html
  • เพิ่มสคริปต์ test และ coverage และใช้ vitest run ใน CI

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

บทเรียน “การตั้งค่า Vitest สำหรับโปรเจกต์ Vue” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า Vitest สำหรับโปรเจกต์ Vue”

vitest.config.ts สภาพแวดล้อม jsdom, @vue/test-utils, การวัดความครอบคลุมด้วย v8 และสคริปต์ทดสอบ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “การตั้งค่า Vitest สำหรับโปรเจกต์ Vue” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การตั้งค่า Vitest สำหรับโปรเจกต์ Vue
  2. การเมาท์และค้นหาคอมโพเนนต์
  3. การทดสอบการโต้ตอบและเหตุการณ์ของผู้ใช้
  4. การจำลองคอมโพสิเบิล สโตร์ และ API
← กลับไปที่ Vue Academy