Vitest : Initialisation

Installation

L’installation de Vitest nécessite d’avoir préalablement installé le bundler Vite dans votre projet.

npm i vite

Il est désormais temps d’installer Vitest avec :

npm i --save-dev vitest

Vous remarquerez l’emploi du --save-dev afin d’enregistrer vitest comme une dépendance de développement dans 📄 package.json.

Configuration

Configurer une commande de test

La première chose à configurer dans notre projet est la commande permettant de lancer nos tests. Pour cela, rendez-vous dans le fichier 📄 package.json et ajoutez un nouveau script npm run *** dans la propriété scripts :

{
	...
  "scripts": {
    "test": "vitest"
  }
}

Désormais, npm run test permettra d’exécuter Vitest sur vos futurs fichiers de test.

Fichier de configuration

La configuration de Vitest se base sur la configuration de Vite, définie dans le fichier 📄 vite.config.js s’il existe. De ce fait, Vitest prendra en compte les options de build existantes ainsi que les éventuels plugins utilisés (Vue, Legacy, React…).

Définir une propriété test dans vite.config

Si vous utilisez Vite en tant que solution de build, vous pouvez configurer Vitest en ajoutant une propriété test à l’intérieur du fichier 📄 vite.config.js.

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    // Ma configuration Vitest
  },
})

De nombreuses options de configuration sont disponibles, comme par exemple :

• globals : permet de définir des variables globales disponibles dans tous les tests pour éviter les imports manuels.
• environment : définit l’environnement d’exécution des tests (par exemple, node, jsdom).
• includes : spécifie un ensemble de fichiers ou de dossiers à inclure dans l’exécution des tests.
• excludes : spécifie un ensemble de fichiers ou de dossiers à exclure dans l’exécution des tests.
• Etc.

Les options de configuration de Vitest sont détaillées dans la documentation officielle.

Vitest propose une configuration par défaut assez complète, définir des options de configuration est donc purement optionnel.

Créer un fichier vitest.config

Vitest propose une seconde approche consistant à créer un fichier de configuration dédié à Vitest, nommé 📄 vitest.config.js. La configuration de Vitest sera toujours définie au sein d’une propriété test.

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    // Ma configuration Vitest
  },
})

Une réponse à cette problématique consiste à utiliser la méthode mergeConfig, permettant de fusionner les configurations des 2 fichiers :

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [Vue()],
})

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

export default mergeConfig(viteConfig, defineConfig({
  test: {
    // Ma configuration Vitest
  }
}))

Fichiers de test

Convention

Un test sera écrit au sein d’un fichier portant l’extension .test.js ou .spec.js.

Arborescence

Vitest n’impose pas d’arborescence spécifique pour ranger ses fichiers de test, le tout est qu’elle soit la plus claire et structurée possible.

Généralement, les développeurs ont tendance à créer un dossier 📂 tests ou 📂 __tests__ à la racine, puis des sous-répertoires par fonctionnalité ou par arborescence miroir (du dossier contenant le code source).

📁 tests
├── 📁 auth
│   ├── 📄 login.test.js
│   ├── 📄 logout.test.js
│   ├── 📄 register.test.js
│   ├── 📄 forgot-password.test.js
│   └── ...
├── 📁 crud-products
│   ├── 📄 create.test.js
│   ├── 📄 read.test.js
│   ├── 📄 update.test.js
│   ├── 📄 delete.test.js
│   └── ...

📁 tests
├── 📁 components
│   ├── 📄 Button.test.js
│   ├── 📄 Input.test.js
│   ├── 📄 Modal.test.js
│   └── ...
├── 📁 pages
│   ├── 📄 Home.test.js
│   ├── 📄 About.test.js
│   └── ...
├── 📁 utils
│   └── 📄 helpers.test.js