Vue Academy · Leçon

Configurer Vitest pour les projets Vue

vitest.config.ts, environnement jsdom, @vue/test-utils, couverture avec v8 et script de test

Leçon 1 sur 413 étapes

Configurer Vitest pour les projets Vue est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Pourquoi Vitest avec Vue ?

Vitest est un exécuteur de tests rapide basé sur Vite. Comme les projets Vue 3 utilisent déjà Vite, Vitest réutilise la même configuration et les mêmes transformations : aucun pipeline de compilation distinct n'est nécessaire pour les tests.

Il fournit une API comparable à celle de Jest, avec une prise en charge native d'ESM et de TypeScript.

Installer les outils

Ajoutez Vitest, les utilitaires de test de Vue et jsdom, un DOM semblable à celui d'un navigateur pour Node.

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

L'environnement jsdom

Les composants ont besoin d'un DOM dans lequel être montés. Node n'en possède pas, les tests s'exécutent donc dans jsdom, qui simule les API du navigateur. Définissez-le comme environnement de test dans la configuration.

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

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

Activer les variables globales

Par défaut, vous importez describe, it et expect dans chaque fichier. Définir globals: true les rend disponibles partout sans importation, comme avec Jest.

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

Types TypeScript pour les variables globales

Lorsque vous utilisez les variables globales avec TypeScript, ajoutez les types de Vitest afin que l'éditeur connaisse describe et les fonctions associées.

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

Un premier fichier de test

Vitest détecte les fichiers qui se terminent par .test.ts ou .spec.ts. Avec les variables globales activées, vous écrivez directement les tests.

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

Monter un composant

Une fois @vue/test-utils installé et jsdom configuré, vous pouvez monter de vrais composants dans un test et vérifier leur rendu.

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

Ajouter la couverture

La couverture indique quelles lignes sont exécutées par vos tests. Vitest prend en charge le fournisseur v8, rapide et natif. Configurez-le sous test.coverage.

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

Le rapport HTML de couverture

Le rapporteur html génère un rapport consultable dans un navigateur, par défaut dans coverage/index.html. Ouvrez-le pour voir, fichier par fichier, la couverture des lignes et des branches, ainsi que les parties manquantes mises en évidence.

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

Scripts de package.json

Configurez des scripts pratiques. test exécute la suite ; coverage l'exécute avec l'option de couverture.

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

Mode surveillance ou exécution

La commande simple vitest reste en mode surveillance et relance les tests concernés lors de chaque enregistrement, ce qui est idéal pendant le développement. En intégration continue, vous voulez une seule exécution qui se termine : utilisez donc vitest run.

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

Vérification rapide

Vérifiez votre compréhension de la configuration de Vitest.

Réponds-y dans la leçon interactive

Récapitulatif

Vous avez configuré Vitest pour un projet Vue :

Installez vitest, @vue/test-utils, jsdom et un fournisseur de couverture.
Définissez environment: "jsdom" afin que les composants disposent d'un DOM.
globals: true évite d'importer les utilitaires de test ; ajoutez vitest/globals aux types de tsconfig.
Configurez la couverture avec le fournisseur v8 et un rapporteur html.
Ajoutez les scripts test et coverage ; utilisez vitest run en intégration continue.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 42
Leçons: 156

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Configurer Vitest pour les projets Vue » est-elle gratuite ?

Oui — le texte complet de « Configurer Vitest pour les projets Vue » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Configurer Vitest pour les projets Vue » ?

vitest.config.ts, environnement jsdom, @vue/test-utils, couverture avec v8 et script de test Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Configurer Vitest pour les projets Vue » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Configurer Vitest pour les projets Vue
Monter et interroger des composants
Tester les interactions et événements utilisateur
Simuler les composables, stores et API

← Retour à Vue Academy