Tester Vue.js avec Vitest

Prérequis

Avant de commencer, assurez-vous d’avoir installé les dépendances nécessaires :

npm install -D vitest @vue/test-utils jsdom

Configuration de l’environnement de test

Pour tester des composants Vue.js, nous avons besoin d’un environnement DOM. Vitest utilise jsdom pour simuler un environnement de navigateur.

Créez un fichier vitest.config.js à la racine de votre projet ou modifiez votre configuration Vite existante:

import { defineConfig, mergeConfig } from "vite";
import viteConfig from "./vite.config";
import 'vitest/config'

export default mergeConfig(
    viteConfig,
    defineConfig({
        test: {
            environment: 'jsdom'
        }
    })
)

Cette configuration étend votre configuration Vite existante et spécifie que les tests doivent s’exécuter dans l’environnement jsdom.