Vue Academy · Pelajaran

Menyiapkan Vitest untuk Proyek Vue

vitest.config.ts, lingkungan jsdom, @vue/test-utils, cakupan dengan v8, serta skrip test.

Menyiapkan Vitest untuk Proyek Vue adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mengapa Vitest untuk Vue?

Vitest adalah pelari pengujian cepat yang dibangun di atas Vite. Karena proyek Vue 3 sudah menggunakan Vite, Vitest menggunakan kembali konfigurasi dan transformasi yang sama—tanpa alur pembangunan terpisah untuk pengujian.

Vitest menyediakan antarmuka pemrograman aplikasi bergaya Jest dengan dukungan ESM dan TypeScript bawaan.

Memasang Peralatan Pengujian

Tambahkan Vitest, utilitas pengujian Vue, dan jsdom (DOM yang menyerupai peramban untuk Node).

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

Lingkungan jsdom

Komponen memerlukan DOM sebagai tempat pemasangan. Node tidak memiliki DOM, jadi pengujian dijalankan dalam jsdom, yang menyimulasikan API peramban. Tetapkan jsdom sebagai lingkungan pengujian dalam konfigurasi.

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

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

Mengaktifkan Global

Secara default, Anda mengimpor describe, it, dan expect di setiap berkas. Menetapkan globals: true membuat semuanya tersedia di mana saja tanpa impor, seperti pada Jest.

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

Tipe TypeScript untuk Global

Saat menggunakan global dengan TypeScript, tambahkan tipe Vitest agar editor mengetahui describe dan fungsi terkait.

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

Berkas Pengujian Pertama

Vitest menemukan berkas yang diakhiri dengan .test.ts atau .spec.ts. Dengan global yang aktif, Anda dapat menulis pengujian secara langsung.

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

Memasang Komponen

Setelah @vue/test-utils terpasang dan jsdom dikonfigurasi, Anda dapat memasang komponen nyata dalam pengujian dan memeriksa hasil rendernya.

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")
})

Menambahkan Cakupan

Cakupan menunjukkan baris mana yang dijalankan oleh pengujian Anda. Vitest mendukung penyedia v8 (cepat dan bawaan). Konfigurasikan di bawah test.coverage.

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

Laporan Cakupan HTML

Penyusun laporan html menulis laporan yang dapat dijelajahi (secara default di coverage/index.html). Buka laporan tersebut untuk melihat cakupan per baris dan cabang pada setiap berkas, lengkap dengan celah yang ditandai.

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

Skrip package.json

Siapkan skrip yang praktis. test menjalankan rangkaian pengujian; coverage menjalankannya dengan tanda cakupan.

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

Mode Pantau vs Jalankan

vitest biasa tetap berada dalam mode pantau dan menjalankan ulang pengujian yang terdampak saat disimpan—sangat berguna selama pengembangan. Dalam CI, Anda menginginkan satu kali proses yang selesai lalu keluar, jadi gunakan vitest run.

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

Uji Cepat

Periksa pemahaman Anda tentang penyiapan Vitest.

Ringkasan

Anda telah mengonfigurasi Vitest untuk proyek Vue:

Pasang vitest, @vue/test-utils, jsdom, dan penyedia cakupan.
Tetapkan environment: "jsdom" agar komponen memiliki DOM.
globals: true menghindari impor pembantu pengujian; tambahkan vitest/globals ke tipe tsconfig.
Konfigurasikan cakupan dengan penyedia v8 dan penyusun laporan html.
Tambahkan skrip test dan coverage; gunakan vitest run dalam CI.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyiapkan Vitest untuk Proyek Vue” gratis?

Ya — teks lengkap “Menyiapkan Vitest untuk Proyek Vue” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menyiapkan Vitest untuk Proyek Vue”?

vitest.config.ts, lingkungan jsdom, @vue/test-utils, cakupan dengan v8, serta skrip test. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Menyiapkan Vitest untuk Proyek Vue” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy