Maîtriser les appels d'API simulés avec Jest : un didacticiel complet

La simulation des appels d'API avec Jest est cruciale pour écrire des tests efficaces, rapides et fiables. Ce didacticiel vous guidera à travers les techniques essentielles pour contrôler les réponses simulées à l'aide de la vaste bibliothèque et des adaptateurs de Jest pour les scénarios avancés.

Lors de l'écriture de tests pour du code qui effectue des appels d'API, il est important de se moquer de ces appels. Cette stratégie garantit que vos tests sont fiables, rapides et indépendants des services externes. Jest, un framework de test JavaScript populaire, propose plusieurs méthodes pour simuler facilement les appels d'API. Explorons les différentes approches que vous pouvez utiliser.

Utiliser jest.mock()

Un moyen simple de simuler les appels d'API dans Jest consiste à utiliser la fonction jest.mock() pour simuler l'intégralité du module qui effectue la requête API. Voici un exemple :

// api.js
import axios from 'axios';

export const getUsers = () => {
  return axios.get('/users');
};

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios');

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });

  const result = await getUsers();

  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

Dans cet exemple, nous utilisons jest.mock('axios') pour simuler automatiquement l'intégralité du module axios. Nous utilisons ensuite axios.get.mockResolvedValueOnce() pour simuler la réponse au prochain appel axios.get. Notre test vérifie que l'API a été appelée correctement et renvoie les données simulées.

Utiliser des simulations manuelles

Une autre approche consiste à simuler manuellement le module qui effectue l'appel d'API en créant un dossier __mocks__ et en y plaçant un fichier d'implémentation fictif :

// __mocks__/axios.js
export default {
  get: jest.fn(() => Promise.resolve({ data: {} })),
  post: jest.fn(() => Promise.resolve({ data: {} })),
  // ...
};

Maintenant, dans votre test, vous pouvez vous moquer de différentes réponses pour chaque test :

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios');

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });

  const result = await getUsers();

  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

Avec cette simulation manuelle, vous avez un contrôle total et pouvez vous moquer de différentes méthodes Axios, comme get et post, avec vos propres implémentations.

Utilisation d'axios-mock-adapter

Pour une simulation plus avancée des requêtes Axios, vous pouvez utiliser la bibliothèque axios-mock-adapter. Tout d’abord, installez-le :

npm install axios-mock-adapter --save-dev

Puis dans vos tests :

// api.test.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { getUsers } from './api';

describe('getUsers', () => {
  let mock;

  beforeAll(() => {
    mock = new MockAdapter(axios);
  });

  afterEach(() => {  
    mock.reset();
  });

  test('returns users data', async () => {
    const users = [{ id: 1, name: 'John' }];
    mock.onGet('/users').reply(200, users);

    const result = await getUsers();

    expect(result.data).toEqual(users);  
  });
});

Avec axios-mock-adapter, vous pouvez simuler des requêtes basées sur des URL, des paramètres, des en-têtes, etc. Vous pouvez également simuler des erreurs et des délais d'attente.

Injection d'une instance Axios simulée

Si votre code utilise directement axios, une autre option consiste à injecter une instance axios simulée dans votre code lors des tests :

// api.js
import axios from 'axios';

export const getUsers = () => {
  return axios.get('/users');
};

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios', () => ({
  get: jest.fn(),
}));

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });

  const result = await getUsers();

  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

Ici, nous nous moquons d'axios lui-même, pas du module entier, et fournissons notre propre fonction get simulée.

Conseils pour se moquer des appels d'API

Voici quelques conseils à garder à l'esprit lorsque vous vous moquez des appels d'API dans Jest :

1. Réinitialiser les simulations entre les tests : utilisez beforeEach et afterEach pour garantir que les tests sont indépendants.
2. Mockez uniquement les fonctions nécessaires : évitez de trop vous moquer. Concentrez-vous sur les fonctions et les modules que votre code utilise réellement.
3. Cas d'échec de test : simulez des erreurs et des réponses inattendues pour tester la façon dont votre code gère les échecs.
4. Montages simulés réutilisables : créez des luminaires simulés réutilisables pour les réponses API courantes.

Se moquer des API avec EchoAPI

EchoAPI est un excellent outil pour la conception, le débogage et les tests d'interfaces API. Il simplifie le processus de développement en fournissant un environnement intégré dans lequel les développeurs peuvent créer, tester et valider efficacement des API. L'une des fonctionnalités clés d'EchoAPI est sa prise en charge des services fictifs, permettant aux développeurs de simuler les réponses API pour des tests efficaces. Voici comment configurer une API fictive dans EchoAPI :

1. Créez une nouvelle requête HTTP

Définissez l'URL comme /echoapi/login.

2. Configurer les réponses attendues

Allez dans la section conception et configurez les réponses attendues.

Pour une réponse réussie, configurez le JSON comme suit :

// api.js
import axios from 'axios';

export const getUsers = () => {
  return axios.get('/users');
};

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios');

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });

  const result = await getUsers();

  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

Pour une réponse d'échec, configurez le JSON comme suit :

// __mocks__/axios.js
export default {
  get: jest.fn(() => Promise.resolve({ data: {} })),
  post: jest.fn(() => Promise.resolve({ data: {} })),
  // ...
};

3. Configurez les conditions de déclenchement simulées

Dans la section Mock, définissez les conditions de déclenchement du corps de la requête. Si « email » = « test@echoapi.com » et « mot de passe » = « 123456 », sélectionnez la réponse attendue comme Succès. Pour toutes les autres conditions, sélectionnez Échec comme réponse attendue.

4. Activez le mode simulation

Activez les services fictifs et passez à l'environnement fictif avant d'envoyer cette requête API.

Développement front-end

L'utilisation d'API fictives dans le développement frontend vous permet de travailler sur des fonctionnalités immédiatement, sans attendre que le backend soit prêt. Cette approche de développement parallèle accélère le processus global.

Tests automatisés

Les API simulées fournissent des réponses cohérentes pour les tests automatisés, ce qui facilite l'écriture de tests fiables. Des outils tels que Jest et Cypress peuvent s'intégrer à des API fictives pour tester divers composants et flux.

Prototypage

Lors de la création de prototypes ou de preuves de concept, les API fictives permettent une configuration rapide des interactions backend nécessaires sans avoir besoin de créer de véritables services backend.

Conclusion

La simulation d'appels d'API est une compétence fondamentale pour écrire des tests fiables et rapides, en particulier lorsqu'il s'agit de dépendances externes. Jest propose plusieurs façons de simuler les appels d'API, depuis la simulation de modules entiers avec jest.mock(), la simulation manuelle de modules, jusqu'à l'utilisation de bibliothèques comme axios-mock-adapter pour des cas plus avancés. La clé est de choisir la bonne approche en fonction de vos besoins, tout en gardant vos tests indépendants et concentrés sur le code testé.

De plus, EchoAPI fournit des outils robustes pour se moquer des API, améliorant ainsi vos flux de travail de développement et de test. En maîtrisant ces techniques, vous pouvez écrire des tests résilients et maintenir des interactions API efficaces et efficientes.

Alors pourquoi attendre ? Commencez à utiliser ces techniques et outils de moquerie comme EchoAPI pour améliorer votre flux de développement dès aujourd'hui !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!