Aller au contenu principal
Version : Suivant

Premiers pas

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Installez Jest avec votre gestionnaire de paquets préféré :

npm install --save-dev jest

Commençons par écrire un test pour une fonction hypothétique additionnant deux nombres. Créez d'abord un fichier sum.js :

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

Puis créez un fichier nommé sum.test.js. Il contiendra notre test réel :

const sum = require('./sum');

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

Ajoutez la section suivante à votre package.json :

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

Enfin, exécutez 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 succès en utilisant Jest !

Ce test utilise expect et toBe pour vérifier que deux valeurs sont strictement identiques. Pour découvrir les autres fonctionnalités de test de Jest, consultez Utilisation des matchers.

Exécution en ligne de commande​

Vous pouvez exécuter Jest directement via l'interface CLI (s'il est disponible globalement dans votre PATH, par exemple avec yarn global add jest ou npm install jest --global) avec diverses options utiles.

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

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

Pour en savoir plus sur l'utilisation de jest en ligne de commande, consultez la page Options CLI de Jest.

Configuration supplémentaire​

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

Selon votre projet, Jest vous posera quelques questions et créera un fichier de configuration de base avec une brève description pour chaque option :

npm init jest@latest

Utilisation avec Babel​

Pour utiliser Babel, installez les dépendances nécessaires :

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 de Babel dépendra de votre projet. Consultez la documentation de Babel pour plus de détails.

Making your Babel config jest-aware

Jest will set process.env.NODE_ENV to 'test' if it's not set to something else. You can use that in your configuration to conditionally setup only the compilation needed for Jest, e.g.

babel.config.js
module.exports = api => {
  const isTest = api.env('test');
  // You can use isTest to determine what presets and plugins to use.

  return {
    // ...
  };
};
note

babel-jest is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project. To avoid this behavior, you can explicitly reset the transform configuration option:

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

Utilisation avec des bundlers​

La plupart du temps, aucune action particulière n'est requise pour travailler avec différents bundlers, sauf si vous avez un plugin ou une configuration générant des fichiers ou implémentant des règles de résolution personnalisées.

Utilisation avec webpack​

Jest peut être utilisé dans des projets exploitant webpack pour gérer les ressources, styles et la compilation. webpack présente cependant des défis spécifiques. Référez-vous au guide webpack pour commencer.

Utilisation avec Vite​

Jest n'est pas pris en charge par Vite en raison d'incompatibilités avec le système de plugins de Vite.

Des exemples d'intégration de Jest avec Vite sont disponibles dans la bibliothèque vite-jest. Cependant, cette bibliothèque n'est pas compatible avec les versions de Vite ultérieures à la 2.4.2.

Une alternative est Vitest qui propose une API compatible avec Jest.

Utilisation avec Parcel​

Jest peut être utilisé dans des projets utilisant parcel-bundler pour gérer les ressources, styles et compilation, similairement à webpack. Parcel ne nécessite aucune configuration. Consultez la documentation officielle pour commencer.

Utilisation avec TypeScript​

Via babel​

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

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

Ajoutez ensuite @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',
  ],
};

Cependant, il existe certaines mises en garde lors de l'utilisation de TypeScript avec Babel. Comme la prise en charge de TypeScript dans Babel se limite à la transpilation, Jest ne vérifiera pas les types de vos tests lors de leur exécution. Si vous avez besoin de cette fonctionnalité, vous pouvez utiliser ts-jest à la place, ou simplement exécuter le compilateur TypeScript tsc séparément (ou dans le cadre de votre processus de build).

Via ts-jest​

ts-jest est un préprocesseur TypeScript avec support des source maps pour Jest qui vous permet d'utiliser Jest pour tester des projets écrits en TypeScript.

npm install --save-dev ts-jest

Pour que Jest transpile TypeScript avec ts-jest, vous devrez peut-être créer un fichier de configuration.

Définitions de types​

Il existe deux méthodes pour typer les API globales de Jest dans les fichiers de test écrits en TypeScript.

Vous pouvez utiliser les définitions de types fournies avec Jest, qui seront mises à jour à chaque mise à jour de Jest. Installez le package @jest/globals :

npm install --save-dev @jest/globals

Et importez les API depuis celui-ci :

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 supplémentaire sur l'utilisation de describe.each/test.each et des mock functions.

Vous pouvez également choisir d'installer le package @types/jest. Il fournit des types pour les globales Jest sans nécessiter d'importation.

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

@types/jest est une bibliothèque tierce maintenue sur DefinitelyTyped, donc les dernières fonctionnalités ou versions de Jest peuvent ne pas être couvertes immédiatement. Essayez de faire correspondre les versions de Jest et de @types/jest le plus précisément possible. Par exemple, si vous utilisez Jest 27.4.0, installer 27.4.x de @types/jest est idéal.

Utilisation avec ESLint​

Jest peut être utilisé avec ESLint sans configuration supplémentaire à condition d'importer les helpers globaux Jest (describe, it, etc.) depuis @jest/globals avant de les utiliser dans votre fichier de test. Ceci est nécessaire pour éviter les erreurs no-undef d'ESLint, qui ne connaît pas les globales Jest.

Si vous souhaitez éviter ces imports, vous pouvez configurer votre environnement ESLint pour supporter ces globales en ajoutant l'environnement jest :

import {defineConfig} from 'eslint/config';
import globals from 'globals';

export default defineConfig([
  {
    files: ['**/*.js'],
    languageOptions: {
      globals: {
        ...globals.jest,
      },
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-undef': 'warn',
    },
  },
]);

Ou utiliser eslint-plugin-jest, qui produit un effet similaire :

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