将单元测试添加到 Oracle JET 虚拟 DOM 应用程序

简介

测试是开发生命周期的重要组成部分，可确保创建强大而稳定的 Web 应用。有各种类型的测试，例如端到端测试和集成测试。单元测试包括针对单个代码单元（包括类、函数或方法）编写测试。在开发过程的早期编写单元测试是很好的做法。尽早开始不仅证明了测试的重要性，而且增加了实现完全测试覆盖的可能性，而不是等到 Web 应用程序完全正常运行和复杂。

目标

在本教程中，您将学习如何使用 Oracle JET CLI add testing 命令安装测试工具，以及如何在 Oracle JET 虚拟 DOM 应用程序中编写和运行单元测试。

add testing 命令除了使用命令更新应用程序的 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 自动化测试。

Prerequisites

设置为创建包括 Node.js 安装的 Oracle JET 虚拟 DOM 应用程序的开发环境
完成此学习路径中的上一个教程，调试 Oracle JET 虚拟 DOM 应用程序

任务 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：编写单元测试

导航到 JET-Virtual-DOM-app/src/components/content 文件夹，然后创建一个名为 __tests__ 的新文件夹。
在新创建的 JET-Virtual-DOM-app/src/components/content/__tests__ 文件夹中，创建名为 content.spec.tsx 的测试脚本文件。
在 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 调用提供对 Content 组件实例所需的导入（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 应用程序的所有模块。