Ajouter des tests unitaires à une application DOM virtuelle Oracle JET

Introduction

Les tests sont un élément crucial du cycle de développement, assurant la création d'applications Web robustes et stables. Il existe différents types de test, tels que les tests de bout en bout et les tests d'intégration. Les tests unitaires consistent à écrire des tests pour des unités de code individuelles, y compris des classes, des fonctions ou des méthodes. Il est recommandé d'écrire des tests unitaires au début du processus de développement. Commencer tôt démontre non seulement l'importance des tests, mais augmente également la probabilité d'atteindre une couverture complète des tests, plutôt que d'attendre que l'application Web soit entièrement fonctionnelle et complexe.

Objectifs

Dans ce tutoriel, vous apprendrez à installer des outils de test à l'aide de la commande add testing de l'interface de ligne de commande Oracle JET, et à écrire et exécuter un test unitaire dans l'application Oracle JET Virtual DOM.

La commande add testing installe Jest et la bibliothèque Preact Testing, en plus de mettre à jour la section scripts du fichier package.json de votre application avec des commandes pour exécuter les tests unitaires que vous écrivez.

Remarque : n'utilisez pas Jest pour tester ou interagir avec les composants d'interface utilisateur Oracle JET dans votre application. L'équipe Oracle JET a testé ces composants de manière approfondie dans le cadre du processus de développement des composants. Utilisez plutôt Jest pour écrire des tests unitaires pour le code que vous écrivez dans votre application. Pour effectuer un test automatisé de l'interface utilisateur de l'application Oracle JET Virtual DOM que vous développez, utilisez notre bibliothèque d'automatisation de l'interface utilisateur WebElements du composant Oracle JET (@oracle/oraclejet-webdriver). Cette bibliothèque, construite sur Selenium WebDriver, est conçue pour fonctionner avec les composants JET. Pour commencer, reportez-vous à Configuration d'un environnement pour créer des tests d'automatisation d'interface utilisateur pour les applications Web Oracle JET.

Prérequis

Tâche 1 : ajouter les bibliothèques de test

  1. Accédez au dossier JET-Virtual-DOM-app et ajoutez les bibliothèques de test.

    npx ojet add testing

    L'outil Oracle JET crée un dossier test-config dans le dossier JET-Virtual-DOM-app avec les fichiers de configuration requis par les bibliothèques de test :

    ./JET-Virtual-DOM-app/test-config
jest.config.js
testSetup.ts

    Il met également à jour le fichier package.json avec les outils de test installés par la commande add testing. Ces mises à jour incluent les entrées de Jest et de Preact Testing Library.

    . . .
 "devDependencies": {
   . . .
   "@oracle/oraclejet-jest-preset": "16.0.11",
   "@testing-library/preact": "3.2.3",
   "@types/jest": "29.5.3",
   . . .
   "jest": "29.6.2",
   "jest-environment-jsdom": "29.6.2",
   . . .
},

    Enfin, il met à jour la section scripts du fichier package.json avec des commandes permettant d'appeler la bibliothèque de test.

    . . .
"scripts": {
 . . .
  "test": "jest -c test-config/jest.config.js",
  "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand"
 },

Tâche 2 : Ecrire un test d'unité

  1. Accédez au dossier JET-Virtual-DOM-app/src/components/content et créez un dossier nommé __tests__.

  2. Dans le nouveau dossier JET-Virtual-DOM-app/src/components/content/__tests__, créez un fichier de script de test nommé content.spec.tsx.

  3. Dans le fichier content.spec.tsx, écrivez les entrées qui testent la présence de la chaîne Product Information dans le fichier JET-Virtual-DOM-app/src/components/content. Le test s'attend également à ce que cette chaîne soit incluse dans une balise d'élément H1.

    import { h } from "preact";
import { render } from "@testing-library/preact";
import { Content } from "../index";

test("renders Product Information header with a h1 heading", () => {
   const { getByText } = render(<Content />);
   const headerElement = getByText("Product Information");
   expect(headerElement.tagName).toBe("H1");
});

    Le fichier de script de test content.spec.tsx complété utilise également les appels jest.mock pour fournir l'accès aux imports (store_data.json et ojs/ojmutablearraydataprovider) requis par une instance du composant de contenu. Pour inclure ces appels jest.mock dans votre fichier de script de test, reportez-vous à content-spec-tsx.txt.

Tâche 3 : exécution du test d'unité

Dans la fenêtre de terminal, accédez au répertoire JET-Virtual-DOM-app et exécutez le test d'unité dans le dossier JET-Virtual-DOM-app/src/components/content/__tests__ en exécutant la commande suivante.

   npm test

Le test s'exécute et affiche une sortie de console similaire à la suivante.

   $ npm test

   > JET-Virtual-DOM-app@1.0.0 test
   > jest -c test-config/jest.config.js

   PASS  src/components/content/__tests__/content.spec.tsx
   Test suite for Content component
      √ Renders Product Information header with a H1 tag (14 ms)

   Test Suites: 1 passed, 1 total
   Tests:       1 passed, 1 total
   Snapshots:   0 total
   Time:        2.145 s
   Ran all test suites.

Etape suivante

Passez au tutoriel suivant de ce module.

Ce tutoriel fait partie du module Votre première application Oracle JET Virtual DOM.

Vous pouvez revenir à la page principale du parcours de formation DOM virtuel pour accéder à tous les modules sur la création d'applications DOM virtuelles.

Ressources de formation supplémentaires

Explorez d'autres ateliers sur le site docs.oracle.com/learn ou accédez à d'autres contenus d'apprentissage gratuits sur le canal Oracle Learning YouTube. En outre, visitez le site education.oracle.com/learning-explorer pour devenir un explorateur Oracle Learning.

Pour obtenir de la documentation sur le produit, consultez Oracle Help Center.