Ajouter des tests unitaires à une application DOM virtuelle Oracle JET

Présentation

Les tests sont une partie cruciale du cycle de développement, assurant la création d'applications Web robustes et stables. Il existe différents types de tests, tels que les tests de bout en bout et les tests d'intégration. Les tests unitaires consistent à rédiger 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'obtenir 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 ajouter des tests de l'interface de ligne de commande Oracle JET et à écrire et exécuter un test d'unité dans l'application DOM virtuelle Oracle JET.

La commande add testing (Ajouter un test) 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.

Note : N'utilisez pas Jest pour tester ou interagir avec les composants de l'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. Au lieu de cela, utilisez Jest pour écrire des tests unitaires pour le code que vous écrivez dans votre application. Pour effectuer des tests d'interface utilisateur automatisés de l'application DOM virtuelle Oracle JET que vous développez, utilisez notre bibliothèque d'automatisation d'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, voir Configurer un environnement pour créer des tests d'automatisation d'interface utilisateur pour les applications Web Oracle JET.

Conditions requises

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

    Les outils Oracle JET créent 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 des entrées pour Jest et 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 dans le fichier package.json avec des commandes pour appeler la bibliothèque de tests.

    . . .
"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. Naviguez jusqu'au dossier JET-Virtual-DOM-app/src/components/content et créez un nouveau dossier nommé __tests__.

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

  3. Dans le fichier content.spec.tsx, écrivez des entrées qui vérifient 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 terminé utilise également des appels jest.mock pour fournir l'accès aux importations (store_data.json et ojs/ojmutablearraydataprovider) requises par une instance du composant de contenu. Pour inclure ces appels jest.mock dans votre fichier de script de test, voir content-spec-tsx.txt.

Tâche 3 : Exécuter le test d'unité

Dans la fenêtre de terminal, naviguez jusqu'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 la sortie de la console comme suit.

   $ 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.

Étape suivante

Passez au tutoriel suivant dans ce module.

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

Vous pouvez retourner à la page principale du cheminement d'apprentissage DOM virtuel pour accéder à tous les modules de la création d'applications DOM virtuelles.

Ressources d'apprentissage supplémentaires

Explorez d'autres laboratoires sur le site docs.oracle.com/learn ou accédez à plus de contenu d'apprentissage gratuit sur le canal Oracle Learning YouTube. De plus, visitez education.oracle.com/learning-explorer pour devenir un explorateur Oracle Learning.

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