Test JavaScript : par où commencer en 2024 pour un débutant

Pourquoi tester JavaScript n'est pas effrayant, mais utile ?

Quand j'ai commencé à écrire en JavaScript, j'avais l'impression que les tests relevaient de la magie noire. « Pourquoi ? Je vois bien que le code fonctionne ! » pensais-je. Et puis arrivait le lundi, j'ajoutais une petite fonction, et tout se cassait. Ça vous parle ?

Tester JavaScript, c'est comme une assurance pour votre code. Vous l'écrivez une fois, et vous vérifiez son fonctionnement des centaines de fois automatiquement. Et croyez-moi, quand votre projet atteindra 10 000 lignes de code, vous remercierez celui qui vous a forcé à écrire votre premier test.

Dans cet article, je vais vous expliquer par où commencer le test JavaScript pour un débutant, vous montrer des exemples concrets et vous donner des modèles prêts à l'emploi. Vous serez surpris, mais les premiers tests peuvent être écrits en seulement 15 minutes.

Types de tests : ce qu'un débutant doit savoir

Avant d'écrire du code, commençons par la théorie. Il existe trois niveaux principaux de tests, mais pour démarrer, un seul nous intéresse.

Tests unitaires (Unit tests)

Ce sont des tests pour les plus petites parties du code — fonctions, méthodes, classes. Ils vérifient : « Cette fonction spécifique fonctionne-t-elle comme je l'ai prévu ? ». Les tests unitaires JavaScript sont la base par laquelle tout le monde commence.

Tests d'intégration (Integration tests)

Ils vérifient comment les différentes parties du système interagissent entre elles. Par exemple, le lien « formulaire → envoi de données → réponse du serveur » fonctionne-t-il ?

Tests E2E (End-to-End)

Les plus complexes. Ils simulent les actions d'un utilisateur réel : clics, remplissage de formulaires, navigation entre les pages. Pour un débutant, c'est déjà le niveau suivant.

Pour commencer, il vous suffit de maîtriser les tests unitaires. Tout le reste viendra avec l'expérience.

Outils : que choisir pour un débutant ?

Le marché des outils de test JavaScript est vaste. Mais je vais distinguer trois combinaisons réellement utilisables par les débutants :

• Jest — le framework le plus populaire. Fonctionne « prêt à l'emploi », ne nécessite pas de configuration complexe. Idéal pour démarrer.
• Mocha + Chai — un classique. Mocha exécute les tests, Chai fournit des fonctions pratiques pour les vérifications (assertions).
• Vitest — moderne et rapide, presque comme Jest, mais pour les projets sur Vite.

Je recommande de commencer par Jest. Il est intuitif, possède une excellente documentation et une immense communauté. Si vous maîtrisez Jest, passer à d'autres outils sera facile.

Écrire notre premier test : guide pas à pas

Écrivons du code concret. Supposons que nous ayons une simple fonction qui additionne deux nombres :

// math.jsfunction add(a, b) {  return a + b;}

module.exports = add;

Maintenant, installons Jest. Ouvrez un terminal dans le dossier du projet et exécutez :

npm init -ynpm install --save-dev jest

Ajoutez dans package.json un script pour lancer les tests :

"scripts": {  "test": "jest"}

Créez un fichier math.test.js dans le même dossier. Écrivons le test :

// math.test.jsconst add = require('./math');

test('additionne 2 + 3 et obtient 5', () => {  expect(add(2, 3)).toBe(5);});

test('additionne des nombres négatifs', () => {  expect(add(-1, -1)).toBe(-2);});

test('additionne zéro', () => {  expect(add(0, 0)).toBe(0);});

Lancez les tests avec la commande npm test. Si tout est correct, vous verrez des coches vertes. Félicitations, vous venez d'écrire votre premier test JavaScript !

Comment tester des fonctions plus complexes ?

Bien, nous avons appris à additionner des nombres. Mais que faire si la fonction travaille avec des tableaux ou des objets ? Prenons un exemple plus complexe.

Fonction de filtrage des utilisateurs par âge :

// users.jsfunction filterAdults(users) {  return users.filter(user => user.age >= 18)