Comment tester les composants React en utilisant la plaisanterie

Cet article explore en utilisant JEST, un cadre de tests sur Facebook, pour tester les composants React et les fonctions JavaScript simples. Nous commencerons par des fonctions JavaScript simples avant de passer aux fonctionnalités spécifiques à React. La plaisanterie n'est pas exclusivement pour React; Il est assez polyvalent pour toute application JavaScript. Cependant, ses fonctionnalités sont particulièrement utiles pour les tests d'interface utilisateur, ce qui le rend idéal pour réagir.

Points clés:

• Utilisez une plaisanterie pour tester les composants de réact et les fonctions JavaScript.
• Commencez par des fonctions JavaScript simples pour apprendre les bases de la plaisanterie.
• Installez la plaisanterie et Babel pour la compatibilité réagi.
• Utilisez le mode de surveillance de Jest pour une réacheminement de test efficace.
• Pour les composants React, considérez la bibliothèque de tests enzymatiques ou réagis.
• Utiliser la moquerie, les espions et les tests parallèles de Jest.

Un échantillon d'application TODO:

Une petite application TODO (disponible sur GitHub et comme une démo en direct) sert de sujet de test. Il est construit en utilisant ES2015, WebPack et Babel. La logique principale réside dans app/state-functions.js, contenant des fonctions pures (toggleDone, addTodo, deleteTodo) qui gèrent l'état d'application. Ces fonctions sont analogues aux réducteurs redux.

Développement basé sur les tests (TDD):

Bien que TDD (Écriture des tests avant le code) présente des avantages, l'approche est souvent une question de préférence personnelle. Pour les composants de réaction, l'écriture d'écriture est d'abord, puis l'ajout de tests est souvent pratique.

Présentation de la plaisanterie:

Jest, considérablement améliorée par Facebook, offre une configuration rationalisée par rapport à d'autres cadres. Son exécution de test parallèle et son mode de montre améliorent considérablement la vitesse et l'efficacité des tests. Il comprend JSDom pour les tests de type navigateur dans Node.js et prend en charge les tests asynchrones, les moqueurs, les espions et les talons.

Installation et configuration:

Installez les packages nécessaires:

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

Assurez-vous qu'un fichier babel.config.js est présent (exemple fourni dans l'article d'origine). Jest s'attend à des tests dans un répertoire __tests__ (ou des fichiers se terminant par .test.js ou .spec.js).

Tester la logique commerciale:

Un test simple pour toggleDone démontre l'utilisation de Jest:

import { toggleDone } from '../app/state-functions';

test('toggleDone completes an incomplete todo', () => {
  const startState = [{ id: 1, done: false, text: 'Buy Milk' }];
  const finState = toggleDone(startState, 1);
  expect(finState).toEqual([{ id: 1, done: true, text: 'Buy Milk' }]);
});

toEqual est utilisé pour la comparaison des objets / tableau, tandis que toBe est pour les types primitifs. Le mode Watch de Jest (npm test -- --watch ou jest --watch) relâche automatiquement les tests sur les modifications du fichier. Un test similaire pour deleteTodo est également présenté dans l'article d'origine.

Test des composants de réaction:

Test des composants de réaction implique souvent des tests moins complets que la logique métier. Enzyme (ou la bibliothèque de tests React, comme recommandé par l'équipe React) simplifie ce processus. Installez l'enzyme et l'adaptateur approprié:

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

Créer setup-tests.js pour configurer l'enzyme:

import { toggleDone } from '../app/state-functions';

test('toggleDone completes an incomplete todo', () => {
  const startState = [{ id: 1, done: false, text: 'Buy Milk' }];
  const finState = toggleDone(startState, 1);
  expect(finState).toEqual([{ id: 1, done: true, text: 'Buy Milk' }]);
});

Configurer la plaisanterie dans package.json pour utiliser setup-tests.js:

npm install --save-dev enzyme @wojtekmaj/enzyme-adapter-react-17

Un test pour le rendu du composant Todo est affiché, en utilisant mount pour rendre et find pour localiser les éléments. Un test ultérieur utilise jest.fn() pour créer une fonction d'espion et simulate('click') pour déclencher un événement, vérifiant les appels de fonction avec toBeCalledWith.

Conclusion:

La vitesse, le mode de montre et l'API de la plaisanterie en font un framework de test puissant. L'article se termine par un résumé de ses avantages et des suggestions de lecture supplémentaires, ainsi que les FAQ abordant les questions courantes sur le test des composants de réaction avec une plaisanterie. La FAQ couvre render, réagir le rendu de test, les composants de test avec des accessoires et les fonctions de test dans les composants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!