Configurer les mocks de tests
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 :
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
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.