在 Angular 应用程序中使用 Jest 进行单元测试是一个非常好的选择。 Jest 是一个很受欢迎的 JavaScript 测试库，它提供了一个简单的 API 和虚拟 DOM，使得编写和运行测试变得更加容易和快速。本文将讲解如何使用 Jest 测试 Angular 应用程序的最佳实践。我们将了解如何配置 Jest、编写测试和运行测试，并提供一些示例代码和指导意义。
配置 Jest
要开始使用 Jest 进行 Angular 应用程序的测试，我们需要对 Jest 进行配置。首先，我们需要在项目中安装 Jest：
npm install jest --save-dev
我们还需要安装 @angular-builders/jest 包，它是专门针对 Angular 应用程序的 Jest 构建器。运行以下命令：
npm install @angular-builders/jest --save-dev
接下来，我们需要在 package.json 文件中添加一个脚本，来运行 Jest：
"scripts": {
"test": "jest"
},最后，我们需要在项目根目录下创建一个 Jest 配置文件。该文件最好命名为 jest.config.js，其内容如下：
module.exports = {
preset: "@angular-builders/jest/dist/jest-preset.js",
roots: ["src"],
testMatch: ["**/+(*.)+(spec).+(ts)"],
setupFilesAfterEnv: ["<rootDir>/src/setup-jest.ts"],
};在这个配置文件中，我们使用 @angular-builders/jest 的预设配置文件 jest-preset.js。这个配置文件已经包含了很多 Angular 应用程序的配置选项。roots 字段表示我们要从哪个目录开始运行测试；testMatch 字段表示 Jest 应该寻找哪些测试文件；setupFilesAfterEnv 表示测试运行之前需要加载的文件。
编写测试
有了 Jest 的配置，我们现在可以开始编写测试了。在 Angular 应用程序中，我们主要关注组件、指令、服务、管道等等。在下面的示例中，我们将使用 Angular CLI 生成一个简单的组件：
ng generate component my-component
这将在 app 目录下创建一个新的子目录 my-component，其中包含一个新的组件 MyComponentComponent。
组件测试
我们通常会测试组件的行为，检查它是否按预期渲染和呈现页面。下面是一个简单的测试示例：
-- -------------------- ---- -------
------ - ----------------- ------- - ---- ------------------------
------ - -------------------- - ---- ---------------------------
-------------------------------- -- -- -
--- ---------- ---------------------
--- -------- ---------------------------------------
---------------- -- -- -
----- --------------------------------
------------- ----------------------
-----------------------
---
------------- -- -
------- - ----------------------------------------------
--------- - --------------------------
------------------------
---
---------- -------- -- -- -
-------------------------------
---
---------- ------ ------- -- -- -
----- -------- - ----------------------
-------------------------------------------------------------- --------
---
---在这个测试中，我们在 beforeEach 块中配置了 Angular 测试模块，并创建了一个新的 MyComponentComponent 实例。我们还在 beforeEach 块中调用 fixture.detectChanges()，以便在 Angular 的变更检测周期中启动组件。接下来，我们编写了两个测试用例。第一个测试用例检查 MyComponentComponent 是否已经创建。第二个测试用例通过检查 h1 元素是否包含指定的文本来检查组件是否按预期呈现。
服务测试
在 Angular 应用程序中，服务通常是用来处理数据的。下面是一个简单的服务测试示例：
-- -------------------- ---- -------
------ - ------- - ---- ------------------------
------ - --------- - ---- ---------------
--------------------- -- -- -
--- -------- ----------
------------- -- -
-----------------------------------
------- - --------------------------
---
---------- -- --------- -- -- -
-----------------------------
---
---------- ------ ------ -- -- -
----- ---- - ------------------
------------------------------ -------- ----------
---
---在这个测试中，我们在 beforeEach 块中创建了一个新的 Angular 测试模块，并在下一个语句中调用 TestBed.inject 方法来获取一个 MyService 的实例。接下来，我们编写了两个测试用例。第一个测试用例检查服务是否被创建。第二个测试用例检查服务的 getData 方法是否返回预期的数据。
管道测试
管道是 Angular 中用于处理数据格式化的功能。下面是一个简单的管道测试示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
---------------------- -- -- -
--- ----- -----------
------------- -- -
---- - --- -------------
---
---------- -- ---------- -- -- -
--------------------------
---
-------------- ------- -- -- -
----- ----- - ------ -------
----------------------------------------- --------
---
---在这个测试中，我们创建一个新的 FormatPipe 实例，并编写了两个测试用例。第一个测试用例检查 FormatPipe 是否已经创建。第二个测试用例检查管道的 transform 方法是否按预期格式化传入的字符串。
运行测试
现在我们已经编写了测试用例，可以运行它们了。在命令行中运行：
npm run test
这将运行 Jest 并执行所有测试用例。如果所有测试都通过，你将会看到一条成功的消息。如果某个测试失败了，你将看到一个错误信息，其中包含有关失败的详细信息。
总结
这篇文章讲解了如何使用 Jest 测试 Angular 应用程序的最佳实践。我们了解了如何配置 Jest、编写测试以及运行测试，并提供了一个简单的测试用例。如果你正在开发 Angular 应用程序，你应该尝试使用 Jest 进行单元测试。它是一个功能强大的测试库，可以帮助你轻松地编写和运行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66508c25d3423812e431c58b