Vue Academy · Lekcja

Konfiguracja Vitest dla projektów Vue

vitest.config.ts, środowisko jsdom, @vue/test-utils, pokrycie kodu za pomocą v8 oraz skrypt testowy.

Konfiguracja Vitest dla projektów Vue to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dlaczego Vitest dla Vue?

Vitest to szybki runner testów zbudowany na Vite. Ponieważ projekty Vue 3 już korzystają z Vite, Vitest używa tej samej konfiguracji i tych samych transformacji — nie trzeba tworzyć osobnego potoku budowania dla testów.

Udostępnia interfejs API podobny do Jest, z natywną obsługą ESM i TypeScriptu.

Instalowanie narzędzi

Należy dodać Vitest, narzędzia do testowania Vue oraz jsdom — DOM podobny do przeglądarkowego, przeznaczony dla Node.

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

Środowisko jsdom

Komponenty potrzebują DOM-u, w którym mogą zostać zamontowane. Node nie udostępnia DOM-u, dlatego testy są uruchamiane w jsdom, który symuluje API przeglądarki. Należy ustawić go jako środowisko testowe w konfiguracji.

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

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

Włączanie zmiennych globalnych

Domyślnie w każdym pliku trzeba importować describe, it i expect. Ustawienie globals: true udostępnia je wszędzie bez importów, podobnie jak w Jest.

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

Typy TypeScriptu dla zmiennych globalnych

Podczas korzystania ze zmiennych globalnych w TypeScript należy dodać typy Vitest, aby edytor znał describe i powiązane funkcje.

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

Pierwszy plik testowy

Vitest wyszukuje pliki kończące się na .test.ts lub .spec.ts. Przy włączonych zmiennych globalnych testy można pisać bezpośrednio.

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

Montowanie komponentu

Po zainstalowaniu @vue/test-utils i skonfigurowaniu jsdom można montować prawdziwe komponenty w teście i sprawdzać ich wyrenderowany wynik.

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

Dodawanie pokrycia

Pokrycie pokazuje, które wiersze kodu są wykonywane przez testy. Vitest obsługuje dostawcę v8 — szybkiego i natywnego. Należy skonfigurować go w sekcji test.coverage.

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

Raport pokrycia HTML

Reporter html zapisuje raport, który można przeglądać w przeglądarce (domyślnie w coverage/index.html). Należy go otworzyć, aby zobaczyć pokrycie wierszy i gałęzi dla poszczególnych plików wraz z wyróżnionymi brakami.

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

Skrypty package.json

Należy skonfigurować wygodne skrypty. test uruchamia zestaw testów, a coverage uruchamia go z flagą pokrycia.

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

Tryb obserwowania a tryb uruchamiania

Zwykłe vitest pozostaje w trybie obserwowania i po zapisaniu pliku ponownie uruchamia testy, których dotyczy zmiana — to świetne rozwiązanie podczas pracy nad kodem. W CI potrzebne jest pojedyncze uruchomienie kończące działanie procesu, dlatego należy użyć vitest run.

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

Szybkie sprawdzenie

Sprawdź zrozumienie konfiguracji Vitest.

Podsumowanie

Skonfigurowano Vitest dla projektu Vue:

Zainstalowano vitest, @vue/test-utils, jsdom oraz dostawcę pokrycia.
Ustawiono environment: "jsdom", aby komponenty miały dostęp do DOM-u.
globals: true eliminuje konieczność importowania pomocniczych funkcji testowych; do typów tsconfig dodano vitest/globals.
Skonfigurowano pokrycie z dostawcą v8 i reporterem html.
Dodano skrypty test i coverage; w CI należy używać vitest run.

Często zadawane pytania

Czy lekcja „Konfiguracja Vitest dla projektów Vue” jest bezpłatna?

Tak — pełny tekst „Konfiguracja Vitest dla projektów Vue” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Konfiguracja Vitest dla projektów Vue”?

vitest.config.ts, środowisko jsdom, @vue/test-utils, pokrycie kodu za pomocą v8 oraz skrypt testowy. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Konfiguracja Vitest dla projektów Vue”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Konfiguracja Vitest dla projektów Vue
Montowanie i wyszukiwanie komponentów
Testowanie interakcji użytkownika i zdarzeń
Mockowanie composable, store i API

← Powrót do Vue Academy