Objets Mock et Fixtures en JavaScript : comment ne pas perdre la tête dans les tests

Objets Mock et Fixtures en JavaScript : votre arsenal de test

Imaginez que vous écrivez un module qui envoie des requêtes à une API météo externe. Vous lancez les tests — et ils échouent parce que l'API est temporairement indisponible. Ou pire : vous testez un système de paiement, et chaque exécution débite de l'argent réel de la carte. Cela vous parle ? Bienvenue dans le monde où les objets mock et les fixtures en JavaScript deviennent vos meilleurs amis.

Dans cet article, nous ne nous contenterons pas d'énumérer des définitions. Nous verrons comment, grâce aux mocks, aux stubs et aux fixtures, rendre les tests rapides, fiables et indépendants du monde extérieur. Vous apprendrez à tromper les minuteurs, à simuler des requêtes HTTP et à préparer des données de test parfaites. C'est parti !

Pourquoi les mocks et les fixtures sont-ils nécessaires ? La douleur et le salut

Lorsque vous écrivez des tests unitaires en JavaScript, vous voulez tester un seul module. Mais le code réel dépend souvent de bases de données, du système de fichiers, d'appels réseau ou de nombres aléatoires. Sans mocks, chaque test est une loterie : il peut échouer à cause d'un délai d'attente réseau ou parce que le serveur a renvoyé des données incorrectes.

Les objets Mock sont des substituts des dépendances réelles. Ils imitent le comportement des objets originaux, mais vous contrôlez entièrement leurs réponses. Les Fixtures sont des ensembles de données préparés à l'avance (par exemple, un JSON de réponse d'API) que vous injectez dans les tests. Ensemble, ils vous donnent un super-pouvoir : vous testez la logique, et non l'infrastructure.

Mock vs Stub vs Spy : clarifions les termes

Avant d'écrire du code, mettons de l'ordre dans les termes. Dans l'écosystème JavaScript (en particulier dans Jest et Mocha), ces concepts sont parfois mélangés, mais les différences sont importantes :

\n
• Mock (mock) — un objet qui remplace une dépendance réelle et permet de définir un comportement attendu. Vous dites : « Quand la méthode getUser sera appelée avec id=5, retourne l'objet {name: 'Alice'} ».
\n
• Stub (stub) — une version simplifiée d'un mock. Il retourne simplement des données fixes, sans vérifier comment il a été appelé. Souvent utilisé pour remplacer des fonctions qui retournent des valeurs aléatoires.
\n
• Spy (espion) — une enveloppe autour d'une fonction réelle. Il ne modifie pas son comportement, mais enregistre combien de fois elle a été appelée, avec quels arguments et ce qu'elle a retourné. Idéal pour vérifier les effets secondaires.
\n

Dans la plupart des frameworks modernes (Jest, Sinon.js), les mocks savent tout faire : remplacer l'implémentation et espionner. Mais comprendre la différence vous aidera à écrire des tests plus pertinents.

Fixtures : comment préparer des données de test

Les fixtures dans les tests JavaScript sont simplement des données que vous placez dans des fichiers ou des variables séparés. Pourquoi est-ce nécessaire ? D'une part, pour ne pas dupliquer des objets JSON de 50 lignes dans chaque test. D'autre part, pour changer rapidement de scénario : une fixture pour une réponse réussie, une autre pour une erreur.

Exemple d'une fixture simple pour tester un module de gestion des utilisateurs :

// fixtures/users.js\nexport const userAlice = {\n  id: 1,\n  name: 'Alice',\n  email: 'alice@example.com',\n  role: 'admin'\n};\n\nexport const userBob = {\n  id: 2,\n  name: 'Bob',\n  email: 'bob@example.com',\n  role: 'user'\n};\n\nexport const apiResponseSuccess = {\n  status: 200,\n  data: { users: [userAlice, userBob] }\n};\n\nexport const apiResponseError = {\n  status: 500,\n  message: 'Internal Server Error'\n};\n

Maintenant, dans les tests, nous importons simplement ces objets. Cela rend le code plus propre et permet de reproduire facilement des cas : « Et si le serveur renvoyait une erreur 500 ? ».

Mock dans Jest : exemples pratiques

Jest est le framework de test le plus populaire pour JavaScript. Il est intégré dans Create React App, Next.js et de nombreux autres outils. Voyons comment créer des objets mock dans Jest.

Mock de fonctions avec jest.fn()

Supposons que nous ayons une fonction qui appelle un callback après le traitement des données