新增單位測試至 Oracle JET 虛擬 DOM App

簡介

測試是開發生命週期的重要部分，可確保建立強大且穩定的 Web 應用程式。有多種測試類型，例如端對端測試和整合測試。單位測試涉及撰寫個別程式碼單位的測試，包括類別、函數或方法。在開發過程中提早撰寫單元測試是一個良好實行範例。從早期開始，不僅證明測試的重要性，還會增加達成完整測試涵蓋範圍的可能性，而不是等到 Web 應用程式功能完整且複雜為止。

目標

在本教學課程中，您將瞭解如何使用 Oracle JET CLI 新增測試命令安裝測試工具，以及如何在 Oracle JET 虛擬 DOM App 中撰寫及執行單元測試。

add test 指令除了更新您應用程式之 package.json 檔案的 scripts 區段之外，還安裝 Jest 與 Preact Testing Library，並搭配執行您撰寫的單元測試的指令。

注意：請勿使用 Jest 來測試或與應用程式中的 Oracle JET UI 元件互動。Oracle JET 團隊在元件開發流程中廣泛測試了這些元件。請改用 Jest 來撰寫您在應用程式中撰寫之程式碼的單元測試。若要執行您開發之 Oracle JET 虛擬 DOM 應用程式的自動化 UI 測試，請使用 Oracle JET 元件 WebElements UI 自動化程式庫 (@oracle/oraclejet-webdriver)。此程式庫建立在 Selenium WebDriver 之上，是專為搭配 JET 元件所設計。若要開始使用，請參閱設定環境以建立 Oracle JET Web 應用程式的 UI 自動化測試。

必備條件

工作 1：新增測試程式庫

  1. 瀏覽至 JET-Virtual-DOM-app 資料夾，然後新增測試程式庫。

    npx ojet add testing

    Oracle JET 工具會在 JET-Virtual-DOM-app 資料夾中建立一個含有測試程式庫所需之組態檔的 test-config 資料夾：

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

    它也會使用 add testing 指令所安裝的測試工具來更新 package.json 檔案。這些更新包括 Jest 和 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",
   . . .
},

    最後，它會使用呼叫測試程式庫的命令來更新 package.json 檔案中的 scripts 區段。

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

任務 2：撰寫單位測試

  1. 導覽至 JET-Virtual-DOM-app/src/components/content 資料夾，並建立名為 __tests__ 的新資料夾。

  2. 在新建立的 JET-Virtual-DOM-app/src/components/content/__tests__ 資料夾中，建立一個名為 content.spec.tsx 的測試命令檔檔案。

  3. 在 content.spec.tsx 檔案中，寫入測試 JET-Virtual-DOM-app/src/components/content 檔案中字串 Product Information 是否存在的項目。此測試也預期此字串會包含在 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");
});

    完成的 content.spec.tsx 測試命令檔檔案也會使用 jest.mock 呼叫來存取內容元件執行處理所需的匯入 (store_data.json 和 ojs/ojmutablearraydataprovider)。若要在您的測試命令檔檔案中包含這些 jest.mock 呼叫，請參閱 content-spec-tsx.txt 。

作業 3：執行單位測試

在終端機視窗中，執行下列命令，瀏覽至 JET-Virtual-DOM-app 目錄，然後在 JET-Virtual-DOM-app/src/components/content/__tests__ 資料夾中執行單元測試。

   npm test

此測試會執行並顯示類似以下的主控台輸出。

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

下一步

繼續本模組的下一個教學課程。

本教學課程是 Your First Oracle JET Virtual DOM App 模組的一部分。

您可以返回虛擬 DOM 學習路徑的主頁面，存取建置虛擬 DOM 應用程式的所有模組。

其他學習資源

在 docs.oracle.com/learn 上探索其他實驗室，或在 Oracle Learning YouTube 頻道上存取更多免費學習內容。此外，請造訪 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請造訪 Oracle Help Center 。