Vue Academy · Lezione

Configurazione di Vitest per i progetti Vue

vitest.config.ts, ambiente jsdom, @vue/test-utils, coverage con v8, script di test.

Configurazione di Vitest per i progetti Vue è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Perché Vitest per Vue?

Vitest è un test runner veloce basato su Vite. Poiché i progetti Vue 3 usano già Vite, Vitest riutilizza la stessa configurazione e le stesse trasformazioni: non serve una pipeline di build separata per i test.

Offre un'API simile a quella di Jest, con supporto nativo per ESM e TypeScript.

Installare gli strumenti

Aggiunga Vitest, le utility di test per Vue e jsdom (un DOM simile a quello del browser per Node).

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

L'ambiente jsdom

I componenti devono essere montati in un DOM. Node non dispone di un DOM, quindi i test vengono eseguiti in jsdom, che simula le API del browser. Lo imposti come ambiente di test nella configurazione.

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

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

Abilitare i globali

Per impostazione predefinita, deve importare describe, it ed expect in ogni file. Impostando globals: true, li rende disponibili ovunque senza importazioni, come in Jest.

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

Tipi TypeScript per i globali

Quando usa i globali con TypeScript, aggiunga i tipi di Vitest, così l'editor riconoscerà describe e le funzioni correlate.

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

Un primo file di test

Vitest individua i file che terminano in .test.ts o .spec.ts. Con i globali attivi, può scrivere direttamente i test.

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

Montare un componente

Dopo aver installato @vue/test-utils e configurato jsdom, può montare componenti reali in un test e verificare il loro output renderizzato.

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

Aggiungere la coverage

La coverage mostra quali righe vengono eseguite dai test. Vitest supporta il provider v8 (veloce e nativo). Lo configuri in test.coverage.

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

Il report HTML della coverage

Il reporter html genera un report consultabile nel browser (per impostazione predefinita coverage/index.html). Lo apra per visualizzare la coverage di righe e rami per ogni file, con le lacune evidenziate.

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

Script di package.json

Configuri script pratici. test esegue la suite; coverage la esegue con il flag della coverage.

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

Modalità watch e run

vitest resta in modalità watch ed esegue nuovamente i test interessati a ogni salvataggio: è ideale durante lo sviluppo. In CI serve un'unica esecuzione che termini, quindi utilizzi vitest run.

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

Verifica rapida

Verifichi la comprensione della configurazione di Vitest.

Riepilogo

Ha configurato Vitest per un progetto Vue:

Installi vitest, @vue/test-utils, jsdom e un provider per la coverage.
Imposti environment: "jsdom", così i componenti dispongono di un DOM.
globals: true evita di importare gli helper dei test; aggiunga vitest/globals ai tipi di tsconfig.
Configuri la coverage con il provider v8 e un reporter html.
Aggiunga gli script test e coverage; utilizzi vitest run in CI.

Domande Frequenti

La lezione «Configurazione di Vitest per i progetti Vue» è gratuita?

Sì — il testo completo di «Configurazione di Vitest per i progetti Vue» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Configurazione di Vitest per i progetti Vue»?

vitest.config.ts, ambiente jsdom, @vue/test-utils, coverage con v8, script di test. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Configurazione di Vitest per i progetti Vue»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Configurazione di Vitest per i progetti Vue
Mount e interrogazione dei componenti
Test delle interazioni utente e degli eventi
Mock di composable, store e API

← Torna a Vue Academy