Einheitentests zu einer virtuellen Oracle JET-DOM-App hinzufügen

Einführung

Tests sind ein wichtiger Teil des Entwicklungslebenszyklus und stellen die Erstellung robuster und stabiler Web-Apps sicher. Es gibt verschiedene Arten von Tests, wie End-to-End-Tests und Integrationstests. Unit Testing beinhaltet das Schreiben von Tests für einzelne Codeeinheiten, einschließlich Klassen, Funktionen oder Methoden. Es ist gut, schon früh im Entwicklungsprozess Unit-Tests zu schreiben. Der frühe Start zeigt nicht nur die Wichtigkeit von Tests, sondern erhöht auch die Wahrscheinlichkeit, eine vollständige Testabdeckung zu erreichen, anstatt zu warten, bis die Web-App voll funktionsfähig und komplex ist.

Ziele

In diesem Tutorial erfahren Sie, wie Sie Testtools mit dem Oracle JET-CLI-Befehl Test hinzufügen installieren und wie Sie einen Unit-Test in der virtuellen Oracle JET-DOM-App schreiben und ausführen.

Der Befehl add testing installiert Jest und die Preact Testing Library. Außerdem wird der Abschnitt scripts der package.json-Datei Ihrer App mit Befehlen aktualisiert, um die Unit-Tests auszuführen, die Sie schreiben.

Hinweis: Verwenden Sie Jest nicht zum Testen oder Interagieren mit den Oracle JET-UI-Komponenten in Ihrer App. Das Oracle JET-Team hat diese Komponenten im Rahmen des Entwicklungsprozesses der Komponenten ausführlich getestet. Verwenden Sie stattdessen Jest, um Einheitentests für Code zu schreiben, den Sie in Ihrer App schreiben. Um automatisierte UI-Tests für die von Ihnen entwickelte virtuelle Oracle JET-DOM-App durchzuführen, verwenden Sie unsere UI-Automatisierungsbibliothek (@oracle/oraclejet-webdriver) der Oracle JET-Komponente WebElements. Diese Bibliothek, die auf Selenium WebDriver basiert, ist für die Arbeit mit JET-Komponenten konzipiert. Informationen zu den ersten Schritten finden Sie unter Umgebung zum Erstellen von UI-Automatisierungstests für Oracle JET-Webanwendungen einrichten.

Voraussetzungen

Aufgabe 1: Testbibliotheken hinzufügen

  1. Navigieren Sie zum Ordner JET-Virtual-DOM-app, und fügen Sie die Testbibliotheken hinzu.

    npx ojet add testing

    Das Oracle JET-Tooling erstellt einen Ordner test-config im Ordner JET-Virtual-DOM-app mit den Konfigurationsdateien, die für die Testbibliotheken erforderlich sind:

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

    Außerdem wird die Datei package.json mit den Testtools aktualisiert, die der Befehl add testing installiert. Diese Updates umfassen Einträge für Jest und die 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",
   . . .
},

    Schließlich wird der Abschnitt scripts in der Datei package.json mit Befehlen aktualisiert, um die Testbibliothek aufzurufen.

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

Aufgabe 2: Einheitentests erstellen

  1. Navigieren Sie zum Ordner JET-Virtual-DOM-app/src/components/content, und erstellen Sie einen neuen Ordner mit dem Namen __tests__.

  2. Erstellen Sie im neu erstellten Ordner JET-Virtual-DOM-app/src/components/content/__tests__ eine Testskriptdatei namens content.spec.tsx.

  3. Schreiben Sie in der Datei content.spec.tsx Einträge, die auf das Vorhandensein der Zeichenfolge Product Information in der Datei JET-Virtual-DOM-app/src/components/content testen. Der Test erwartet auch, dass diese Zeichenfolge in ein Element-Tag H1 eingeschlossen wird.

    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");
});

    Die fertiggestellte Testskriptdatei content.spec.tsx verwendet auch jest.mock-Aufrufe, um Zugriff auf die Importe (store_data.json und ojs/ojmutablearraydataprovider) zu gewähren, die eine Instanz der Inhaltskomponente benötigt. Informationen zum Einschließen dieser jest.mock-Aufrufe in die Testskriptdatei finden Sie unter content-spec-tsx.txt.

Aufgabe 3: Einheitentest ausführen

Navigieren Sie im Terminalfenster zum Verzeichnis JET-Virtual-DOM-app, und führen Sie den Unit-Test im Ordner JET-Virtual-DOM-app/src/components/content/__tests__ aus. Führen Sie dazu den folgenden Befehl aus.

   npm test

Der Test wird ausgeführt und zeigt die Konsolenausgabe ähnlich der folgenden an.

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

Nächsten Schritt

Fahren Sie mit dem nächsten Tutorial in diesem Modul fort.

Dieses Tutorial ist Teil des Moduls Ihre erste Oracle JET Virtual DOM-App.

Sie können zur Hauptseite des virtuellen DOM-Lernpfads zurückkehren, um auf alle Module zum Erstellen virtueller DOM-Apps zuzugreifen.

Weitere Lernressourcen

Sehen Sie sich weitere Übungen zu docs.oracle.com/learn an, oder greifen Sie auf weitere kostenlose Lerninhalte im Oracle Learning YouTube-Kanal zu. Besuchen Sie außerdem education.oracle.com/learning-explorer, um ein Oracle Learning Explorer zu werden.

Die Produktdokumentation finden Sie im Oracle Help Center.