Configurer les mocks de tests

8 min

Configurer les mocks de tests

Les tests générés pour les vues s’appuient sur les configurations de test présentes dans le starter OIP.

Ils utilisent notamment :

un environnement GraphQL ;

les providers de test du projet ;

MSW pour intercepter et mocker les appels REST et GraphQL ;

React Testing Library pour le rendu et les interactions avec le composant ;

userEvent pour simuler les actions utilisateur.

Initialiser l’environnement GraphQL

Les fichiers de tests générés contiennent généralement un bloc beforeAll.

Ce bloc permet d’initialiser l’environnement GraphQL utilisé pendant les tests.

Exemple :

let environment; beforeAll(async () => { environment = await GQLEnvironment(); });

Cet environnement est ensuite transmis aux providers de test, notamment au RelayEnvironmentProvider ou aux providers spécifiques du projet.

Utiliser les providers de test

Les composants testés sont généralement rendus avec un wrapper de test.

Ce wrapper permet d’injecter l’environnement nécessaire au bon fonctionnement de la vue.

Exemple :

render(<Home />, { wrapper: ({ children }) => ( <TestsProviders environment=> </TestsProviders> ) });

Configurer MSW avec setupServer

La fonction setupServer permet de configurer les mocks nécessaires aux tests.

Elle sert notamment à mocker :

les appels GraphQL ;

les appels REST ;

les queries utilisées par la vue ;

les mutations déclenchées par les actions utilisateur.

La fonction peut recevoir un tableau de mocks complémentaires.

Ces mocks sont ajoutés aux mocks définis par défaut. S’ils interceptent les mêmes appels, ils peuvent également les surcharger.

Exemple de mock GraphQL

graphql.query('GetAdhesionQuery', (req, res, ctx) => { return res( ctx.data({ getAdhesion_adhesion: { a_valid_key: 'a_valid_value' } }) ); });

Données retournées par les mocks

Les données retournées par les queries et mutations doivent être renseignées manuellement.

Elles ne peuvent pas toujours être déduites automatiquement à partir de la configuration YAML de la vue.

Il est donc nécessaire d’adapter les mocks selon :

les queries réellement utilisées par la vue ;

les mutations déclenchées par les actions utilisateur ;

les données nécessaires au rendu du composant ;

les cas fonctionnels que le test doit couvrir.

Exemple de fonction setupServer

const setupServer = (otherQuery = []) => { server.use( ...otherQuery, graphql.query('QProcessQuery', (req, res, ctx) => { return res( ctx.data({ process: { id: 'id', context: { projectId: 'projectId', viewId: 'START', actions: ['PREVIOUS'] }, userSession: null, tasks: null } }) ); }),

graphql.query('GetStartProjectQuery', (req, res, ctx) => { return res( ctx.data({ getStartProject_start: { id: 'String', externalId: 'String', name: 'String' } }) ); }) ); };

Bonnes pratiques

Les mocks doivent rester cohérents avec les données attendues par la vue.

Il est recommandé de :

mocker uniquement les appels nécessaires au test ;

nommer les mocks de manière explicite ;

isoler les cas de test complexes ;

surcharger les mocks par défaut uniquement lorsque cela est nécessaire ;

vérifier que les données mockées correspondent bien à la structure GraphQL attendue.

Remarques

Si un test échoue car une query ou une mutation n’est pas interceptée, vérifiez en priorité la configuration MSW.

Dans la plupart des cas, l’échec vient d’un mock absent, incomplet ou dont le nom ne correspond pas à l’opération GraphQL appelée par la vue.