Aller au contenu principal
Version : 29.7

Premiers pas

Installez Jest en utilisant votre gestionnaire de paquets favori :

npm install --save-dev jest

Commençons par écrire un test pour une hypothétique fonction qui additionne deux nombres. Tout d’abord, créez un fichier sum.js :

function sum(a, b) {
  return a + b;
}
module.exports = sum;

Ensuite, créez un fichier nommé sum.test.js. Il s'agit de notre test actuel :

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Ajoutez la section suivante à votre package.json :

{
  "scripts": {
    "test": "jest"
  }
}

Enfin, lancez yarn test ou npm test et Jest affichera ce message :

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

Vous venez d'écrire votre premier test avec Jest avec succès !

Ce test utilise expect et toBe pour tester que deux valeurs sont exactement identiques. Pour connaître les autres éléments que Jest peut tester, consultez Utilisation des comparateurs.

Exécution en mode ligne de commande​

Vous pouvez exécuter Jest directement depuis le CLI (si celui-ci est globalement disponible dans votre PATH, par exemple yarn global add jest ou npm install jest --global) avec une variété d'options utiles.

Voici comment exécuter Jest sur des fichiers correspondant à my-test, en utilisant config.json comme fichier de configuration et afficher une notification de l'OS natif après l'exécution :

jest my-test --notify --config=config.json

Si vous souhaitez en apprendre davantage sur l'exécution de jest en mode ligne de commande, consultez la page Options CLI de Jest.

Configuration additionnelle​

Générez un fichier de configuration de base​

Basé sur votre projet, Jest vous posera quelques questions et créera un fichier de configuration de base avec une courte description pour chaque option :

npm init jest@latest

Utilisez Babel​

Pour utiliser Babel, installez les dépendances requises :

npm install --save-dev babel-jest @babel/core @babel/preset-env

Configurez Babel pour cibler votre version actuelle de Node en créant un fichier babel.config.js à la racine de votre projet :

babel.config.js
module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

La configuration idéale pour Babel dépendra de votre projet. Consultez la documentation de Babel pour plus de détails.

Faites en sorte que votre configuration Babel soit adaptée à Jest

Jest définira process.env.NODE_ENV avec 'test' s'il n'est pas défini avec quelque chose d'autre. Vous pouvez l'utiliser dans votre configuration pour paramétrer de manière conditionnelle uniquement la compilation nécessaire pour Jest, par exemple.

babel.config.js
module.exports = api => {
  const isTest = api. nv('test');
  // Vous pouvez utiliser isTest pour déterminer les presets et les plugins à utiliser.

  return {
    // ...
  };
};
remarque

babel-jest est automatiquement installé lorsque vous installez Jest et transformera automatiquement les fichiers si une configuration de babel existe dans votre projet. Pour éviter ce résultat, vous pouvez réinitialiser explicitement l'option de configuration transform :

jest.config.js
module.exports = {
  transform: {},
};

Utilisez Webpack​

Jest peut être utilisé dans les projets qui utilisent webpack pour gérer les ressources, les styles et la compilation. webpack offre quelques défis singuliers par rapport à d'autres outils. Consultez le guide webpack pour commencer.

Utilisation de Vite​

Jest peut être utilisé dans des projets qui utilisent vite pour servir le code source sur l'ESM natif afin de fournir certains outils frontaux. Vite est un outil subjectif et offre quelques flux de travail prêts à l'emploi. Jest n'est pas entièrement supporté par vite à cause de la façon dont le système de plugins de vite fonctionne, mais il y a quelques exemples fonctionnels pour une intégration de première classe en utilisant vite-jest, comme ce n'est pas entièrement supporté, vous pourriez aussi lire la limitation de vite-jest. Reportez-vous au guide vite pour commencer.

Utilisation de Parcel​

Jest peut être utilisé dans les projets qui utilisent parcel-bundler pour gérer les ressources, les styles et la compilation de manière similaire à webpack. Parcel nécessite aucune configuration. Reportez-vous à la documentation officielle pour commencer.

Utilisez TypeScript​

Via babel​

Jest prend en charge TypeScript, via Babel. Tout d'abord, assurez-vous d'avoir suivi les instructions sur l'utilisation de Babel ci-dessus. Ensuite, installez @babel/preset-typescript :

npm install --save-dev @babel/preset-typescript

Ensuite, ajoutez @babel/preset-typescript à la liste des presets dans votre babel.config.js.

babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

Toutefois, l'utilisation de TypeScript avec Babel présente quelques inconvénients. La prise en charge de TypeScript dans Babel étant purement une transpilation, Jest ne vérifiera pas le typage de vos tests lors de leur exécution. Si vous souhaitez cela, vous pouvez à la place utiliser ts-jest, ou simplement exécuter le compilateur TypeScript tsc séparément (ou dans le prolongement de votre processus de construction).

Via ts-jest​

ts-jest est un préprocesseur TypeScript avec la prise en charge de source map pour Jest qui vous permet d'utiliser Jest pour tester les projets écrits en TypeScript.

npm install --save-dev ts-jest

Afin que Jest puisse transpiler TypeScript avec ts-jest, vous aurez besoin de créer un fichier de configuration .

Définitions de type​

Il existe deux façons d'avoir les API globales Jest typées pour les fichiers de test écrits en TypeScript.

Vous pouvez utiliser les définitions de types qui sont livrées avec Jest et seront mises à jour chaque fois que vous mettez à jour Jest. Installez le paquet @jest/globals:

npm install --save-dev @jest/globals

Et importez les API depuis le paquet :

sum.test.ts
import {describe, expect, test} from '@jest/globals';
import {sum} from './sum';

describe('sum module', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});
astuce

Consultez la documentation d'utilisation supplémentaire de describe.each/test.each et des fonctions simulées.

Ou vous pouvez choisir d'installer le paquet @types/jest. Il fournit des types pour les globales Jest sans devoir les importer.

npm install --save-dev @types/jest
info

@types/jest is a third party library maintained at DefinitelyTyped, hence the latest Jest features or versions may not be covered yet. Essayez de faire correspondre les versions de Jest et @types/jest aussi proche que possible. Par exemple, si vous utilisez Jest 27.4.0 alors l'installation 27.4.x de @types/jest est idéal.

Using ESLint​

Jest can be used with ESLint without any further configuration as long as you import the Jest global helpers (describe, it, etc.) from @jest/globals before using them in your test file. This is necessary to avoid no-undef errors from ESLint, which doesn't know about the Jest globals.

If you'd like to avoid these imports, you can configure your ESLint environment to support these globals by adding the jest environment:

{
  "overrides": [
    {
      "files": ["tests/**/*"],
      "env": {
        "jest": true
      }
    }
  ]
}

Or use eslint-plugin-jest, which has a similar effect:

{
  "overrides": [
    {
      "files": ["tests/**/*"],
      "plugins": ["jest"],
      "env": {
        "jest/globals": true
      }
    }
  ]
}