web-dev-qa-db-fra.com

Fonctions d'utilitaires partagées pour tester avec Jest

J'ai quelques fonctions utilitaires que j'utilise parmi divers tests Jest, par exemple une fonction comme celle-ci, pour se moquer d'une réponse de récupération:

export const mockFetchJsonResponse = (data) => {
    ok: () => true,
    json: () => data
};

Je voudrais partager ces fonctions de manière à pouvoir les importer et réutiliser parmi mes tests. Par exemple:

// Some .spec.jsx file
...
import {mockFetchJsonResponse} from some/path/to/shared/tests/utils.jsx

// Then I can use mockFetchJsonResponse inside this test
// ...

Où dois-je placer ces fonctions d'utilitaires communs?

Mon dossier de projet ressemble à ceci:

components/
    CompOne/
        __tests__
        index.jsx
    CompTwo/
        __tests__
        ...
utils/
    __tests__
    http.js
    user.js
    ...

Dois-je les placer dans le dossier utils avec les autres fonctions utilitaires que j'utilise pour mon projet? Dois-je alors écrire également des tests unitaires pour ces fonctions?

javascriptreactjsjestjs
11
Andrea

Il est possible d'exposer les assistants en tant que fonctions globales sans avoir à importer explicitement les modules.

  1. Jest permet de configurer certains fichiers seront exécutés avant chaque fichier de test exécuté via l'option de configuration setupFiles
  2. Jest fournit également global objet que vous pouvez modifier et tout ce que vous y mettrez sera disponible dans vos tests.

Exemple

package.json:

"jest": {
    "setupFiles": ["helpers.js"]
}

helpers.js:

global.mockFetchJsonResponse = (data) => {
    ok: () => true,
    json: () => data
};

somecomponent.test.js:

mockFetchJsonResponse(); // look mom, I can call this like say expect()!

Avec TypeScript

TypeScript se plaindra avec cannot find name 'mockFetchJsonResponse'. Vous pouvez résoudre ce problème en ajoutant un fichier de déclaration:

helpers.d.ts:

declare function mockFetchJsonResponse(data: any): any;

Et ajoutez ce fichier à la section files de votre tsconfig.json:

// ...
"files": [
    "./.jest/helpers.d.ts"
],
// ...

Cela expose également la déclaration de mockFetchJsonResponse à l'ensemble de votre base de code, ce qui n'est probablement pas souhaitable. Je ne peux pas penser à un moyen simple d'éviter cela.

Bien sûr, cela ne vous répond pas directement à la question "où placer les fichiers" mais c'est quand même à vous de décider. Vous avez juste besoin de spécifier ces fichiers dans la section setupFiles. Puisqu'il n'y a pas de import nécessaire dans les tests, cela n'a pas vraiment d'importance.

Quant aux tests des assistants de test, je ne suis pas sûr. Voir cela fait partie de tester l'infrastructure comme le fichier de spécifications lui-même. Et nous n'écrivons pas de tests pour les tests ou cela ne s'arrêterait jamais. Bien sûr, cela dépend de vous - dites si la logique derrière est vraiment très complexe et difficile à suivre. Mais si l'aide fournit une logique trop complexe/compliquée, cela entraînerait des tests eux-mêmes impossibles à comprendre, êtes-vous d'accord?

bravo à cela article sur les tests de composants avec intl . Je n'ai jamais traité globals en plaisantant auparavant.

7
skyboyer