Utilisation de Jest avec React

Mise en place de la bibliothèque de tests Jest + React dans un environnement d'entretien

Dans les environnements Interview React, nous utilisons Vite comme bundler et serveur de développement pour votre projet React. Nous avons choisi Vite pour sa configuration simple, son support TypeScript prêt à l'emploi et le rechargement à chaud des modules. Malheureusement, l'intégration entre Vite et Jest est toujours en cours.

Pour utiliser Jest dans votre projet React, nous vous suggérons d'utiliser Babel pour transpiler votre code. L'approche que nous recommandons est largement empruntée à ce cours d'Egghead.io. Dans cet exemple, nous allons également installer la bibliothèque de test pour React.

Dépendances NPM

Tout d'abord, vous devrez installer plusieurs dépendances de dev :

# Dépendances Babel
npm install -D @babel/preset-env @babel/preset-react @babel/preset-typescript

Dépendances de la bibliothèque de tests #
npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event

Dépendances de Jest #
npm install -D jest jest-environnement-jsdomLangue du code : PHP (php)

Configuration de Babel

Ajouter un fichier de configuration Babel à la racine du projet appelé babel.config.js.

module.exports = {
  présélections: [
    "@babel/preset-env,
    ["@babel/preset-react"., {temps de fonctionnement: automatique}],
  ],
};Langue du code : JavaScript (javascript)

Configuration de Jest

Enfin, ajoutez un fichier de configuration et un fichier de configuration de Jest à la racine du projet appelés respectivement jest.config.js et jest.setup.js.

// jest.config.js
module.exports = {
  clearMocks: vrai,
  environnement de test: "jsdom",
  setupFilesAfterEnv: [
    "/jest.setup.ts"
  ],
  moduleNameMapper: {
    "\.(css|moins)$": "identité-obj-proxy"
  }
}
// jest.setup.js
import "@testing-library/jest-dom";Langue du code : JavaScript (javascript)

À ce stade, vous pouvez ajouter npm à vos scripts pour exécuter Jest.

// Dans package.json
"scripts": {
  "test": "jest",
  "test:watch": "jest --watchAll"
}Langue du code : JavaScript (javascript)

Maintenant, vous pouvez exécuter npm run test ou npm run test:watch dans le shell interactif pour exécuter les tests unitaires dans votre projet React.

Vous pouvez le tester dans le bac à sable ci-dessous :