Logo

Mocker les dépendances externes dans vos tests unitaires Jest pour isoler vos composants

Introduction

Les tests unitaires efficaces nécessitent d'isoler le composant testé de ses dépendances externes. Mocker ces dépendances permet de contrôler précisément le comportement et de tester chaque partie de votre code indépendamment.

Cet article explore les techniques de mocking dans Jest pour simplifier et améliorer vos tests unitaires.

1. Comprendre le mocking

Mocker consiste à remplacer une dépendance réelle par un objet simulé. Cela permet de contrôler son comportement, de simplifier les tests et d'éviter les appels réseau ou les interactions avec des systèmes externes.

2. Mocker une fonction avec jest.fn()

jest.fn() permet de créer une fonction de test personnalisable, qui peut enregistrer ses appels et simuler un comportement spécifique.

function utilisateurConnecte(authService) {
  return authService.estAuthentifie() ? 'Bienvenue' : 'Connectez-vous';
}

test('utilisateurConnecte affiche Bienvenue si authentifié', () => {
  const mockAuthService = {
    estAuthentifie: jest.fn().mockReturnValue(true)
  };
  expect(utilisateurConnecte(mockAuthService)).toBe('Bienvenue');
});

3. Mocker des modules complets

Jest permet de mocker intégralement un module, utile pour remplacer des bibliothèques externes ou des services complexes.

jest.mock('axios');

test('récupération de données', async () => {
  const mockedAxios = require('axios');
  mockedAxios.get.mockResolvedValue({
    data: { utilisateurs: ['Alice', 'Bob'] }
  });
  
  const resultat = await recupererUtilisateurs();
  expect(resultat).toEqual(['Alice', 'Bob']);
});

4. Techniques avancées

  • Utiliser mockImplementation() pour des comportements complexes
  • Vérifier le nombre et les arguments des appels de fonction
  • Restaurer des implémentations originales avec mockRestore()

Exemple complet : Test d'un composant avec dépendances

function BarreNavigation({ authService, utilisateur }) {
  return authService.estAuthentifie() 
    ? <div>Bonjour {utilisateur.nom}</div>
    : <div>Connexion</div>;
}

test('BarreNavigation affiche le nom si connecté', () => {
  const mockAuthService = { estAuthentifie: jest.fn().mockReturnValue(true) };
  const mockUtilisateur = { nom: 'Emma' };
  
  const { getByText } = render(
    <BarreNavigation 
      authService={mockAuthService}
      utilisateur={mockUtilisateur} 
    />
  );
  
  expect(getByText('Bonjour Emma')).toBeInTheDocument();
});

Bonnes pratiques

  • Mocker uniquement ce qui est nécessaire pour le test
  • Garder les mocks simples et lisibles
  • Tester différents scénarios avec des mocks variés

Conclusion

Le mocking vous aide à écrire des tests unitaires plus précis. En comprenant ces techniques, vous rendrez vos tests plus fiables et plus faciles à maintenir.

Logo