Jest 是一个流行的 JavaScript 测试框架，它是由 Facebook 开源的，并且被广泛用于 React 和 Node.js 项目中。在 Angular 项目中使用 Jest 能够提高我们的测试效率和速度。本文将介绍 Jest 在 Angular 项目中的基本使用方法，包括如何配置环境、编写测试用例和运行测试，并提供示例代码。
环境配置
首先我们需要安装 Jest。可以通过以下命令来完成安装：
npm install jest -D
在 Angular 项目中，我们一般会使用 Karma 测试运行器来运行我们的测试用例。因此，我们还需要安装一些额外的依赖来使 Jest 和 Karma 协同工作：
npm install @types/jest jest-junit ts-jest karma-jest-reporter -D
接下来，让我们修改 karma.conf.js 文件来启用 Jest：
-- -------------------- ---- -------
-------------- - -------- -------- -
------------
----------- ----------- --------
-------- -------------------------- ---------------------- --------------------------------
---------- ------------ --------- --------
-------------- -
---------- ---------
--
----- -
------- -
---------- -----------------
-------- -
---------- -
--------- -------------------------------
--
--
---------- ----------- --------------
--
--
-- ----- -------- --------------
---
--在上面的配置中，我们添加了 Jest 框架和 Jest 预处理器，并启用了 Jest 报告器。我们也指定了 Jest 的配置项，以确保 Jest 能够识别我们的测试用例。
其次，我们需要配置 Jest 来理解 Angular 的特定语法。为此，我们需要添加一个 jest.config.js 文件：
-- -------------------- ---- -------
-------------- - -
------- ----------------------
------------------- -------------------------------
-------- -
---------- -
--------- -------------------------------
-------------------------- -----------------
---------------- -
------- -
---------------------------------------------------
---------------------------------------------------
--
--
--
--
--在上面的配置中，我们使用 jest-preset-angular 预设来适配 Angular 专用的测试环境。
最后，让我们更新 tsconfig.spec.json 文件，确保 Jest 能够识别我们的测试文件：
-- -------------------- ---- -------
-
---------- ------------------
------------------ -
--------- -----------------
-------- -------- --------
------------------ -----
---------- -----
---------- -----
-------- -
--------- --------------
--------- -----------------------
---------- -------------------
------------ ---------------------
------------- ------------------
--
--
-------- --------------- --------------------
---------- -------------------- -----------------
-现在，我们已经完成了 Jest 在 Angular 项目中的环境配置。
编写测试用例
我们可以使用 Jest 提供的 describe、it 和 expect 来编写测试用例。其中，describe 和 it 用于描述和定义测试用例，expect 用于做出断言。
下面是一个示例的测试用例：
-- -------------------- ---- -------
------ - ------- - ---- ------------------------
------ - ------------ - ---- ------------------
------------------------ -- -- -
---------------- -- -- -
----- --------------------------------
------------- ---------------
-----------------------
---
---------- ------ --- ----- -- -- -
----- ------- - --------------------------------------
----- --- - --------------------------
-------------------------
---
---------- ---- -- ----- ---------- -- -- -
----- ------- - --------------------------------------
----- --- - --------------------------
------------------------------------
---
---------- ------ ------- -- -- -
----- ------- - --------------------------------------
------------------------
----- -------- - ----------------------
--------------------------------------- ------------------------------
------- --- -- ---------
--
---
---在上面的测试用例中，我们测试了 AppComponent 的创建、标题和 UI 渲染。我们使用了了 beforeEach 在每个测试用例之间重新创建一个测试组件。我们也使用了 fixture.detectChanges() 来告诉 Angular 更新组件，并且使用 fixture.nativeElement 来访问组件的 DOM。
运行测试
运行 Jest 测试用例通常很简单，只需要执行以下命令即可：
npm run test
这将启动 Karma 并运行我们的测试用例。测试结果将显示在命令行中，并且还将生成一个 XML 格式的测试报告。
如果我们只想运行测试的特定子集，可以使用 --testNamePattern 选项来指定一个匹配测试名称的正则表达式。例如，以下命令将仅运行名称以 should 开头的测试：
npm run test -- --testNamePattern '^should'
如果我们想要自动运行测试，在代码发生更改时，可以使用以下命令：
npm run test:watch
这将启动 Jest 监听模式，并在检测到更改时自动运行测试。
结论
Jest 是一个功能强大，易于使用的测试框架，它在 Angular 项目中也有很大的用武之地。在本文中，我们介绍了 Jest 的基本使用方法，包括环境配置、编写测试用例和运行测试，并提供了示例代码。希望这篇文章能够帮助你更好地了解 Jest 和 Angular 测试，从而加强你的开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67055751d91dce0dc853014f