Oracle JET仮想DOMアプリケーションへのユニット・テストの追加

はじめに

テストは開発ライフサイクルの重要な部分であり、堅牢で安定したWebアプリケーションの作成を保証します。エンドツーエンドのテストや統合テストなど、様々なタイプのテストがあります。ユニット・テストでは、クラス、関数、メソッドなど、個々のコード単位のテストを記述します。開発プロセスの初期段階でユニットテストを記述することをお勧めします。早期に開始することは、テストの重要性を示すだけでなく、Webアプリが完全に機能し複雑になるまで待つよりも、完全なテスト範囲を達成する可能性も高まります。

目的

このチュートリアルでは、Oracle JET CLIのadd testingコマンドを使用してテスト・ツールをインストールする方法、およびOracle JET仮想DOMアプリケーションでユニット・テストを記述して実行する方法について学習します。

add testingコマンドは、JestおよびPreact Testingライブラリをインストールします。さらに、記述したユニット・テストを実行するコマンドで、アプリケーションのpackage.jsonファイルのscriptsセクションを更新します。

ノート: 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ファイルで、文字列Product Informationの存在をテストするエントリをJET-Virtual-DOM-app/src/components/contentファイルに書き込みます。テストでは、この文字列が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.

次のステップ

このモジュールの次のチュートリアルに進みます。

このチュートリアルは、「最初のOracle JET仮想DOMアプリケーション」モジュールの一部です。

仮想DOM学習パスのメイン・ページに戻ると、仮想DOMアプリケーションの構築に関するすべてのモジュールにアクセスできます。

その他の学習リソース

docs.oracle.com/learnで他のラボを確認するか、Oracle Learning YouTubeチャネルで無料のラーニング・コンテンツにアクセスしてください。また、education.oracle.com/learning-explorerにアクセスして、Oracle Learning Explorerになります。

製品ドキュメントについては、Oracle Help Centerを参照してください。