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
}
}
]
}