简介
jest-preset-angular 是一款专门为 Angular 项目测试而设计的 jest 预置包，它包含了很多适用于 Angular 项目单元测试和集成测试的配置和工具，在使用 jest-preset-angular 可以提高测试的效率和可靠性。
本篇教程将会介绍 jest-preset-angular 的安装和配置，以及如何使用它进行单元测试和集成测试。读完本文您将掌握如下内容：
- jest-preset-angular 的安装和配置
- 常用的 jest-preset-angular 的配置
- 使用 jest-preset-angular 进行 Angular 项目的单元测试和集成测试
安装和配置
首先需要在项目中安装 jest-preset-angular，可以通过 npm 在项目根目录运行以下命令安装：
npm install --save-dev jest jest-preset-angular @types/jest ts-jest
接着在项目根目录创建 jest.config.js 配置文件，该文件是 jest 运行所必须使用的配置文件，具体配置如下：
-- -------------------- ---- -------
-------------- - -
------- ----------------------
------ -------------------
---------- --------------------------
------------------- --------------------------
----------------- -
------------ -----------------------
--------------- --------------------------
------------- ----------------------------
------- -----------------------------------------
--------------- ------------------------------
--
---------- -
---------------------- ----------
--
------------------ ---------
--上述配置中，preset 属性指定了使用的预置包，roots 属性指定了测试文件的根目录，testMatch 属性指定了符合测试文件的命名规则，setupFilesAfterEnv 属性指定了每个测试文件之前所需的一些操作，moduleNameMapper 属性指定了引入模块时的别名，transform 属性指定了需要 transform 的文件类型和使用的 transform 工具，coverageReporters 属性指定了覆盖率报告的输出方式。
常用的 jest-preset-angular 的配置
skipTestsFromCoverage：在代码覆盖率统计时是否忽略测试文件，默认是 true。tsconfig：指定ts-jest使用的 tsconfig 配置文件，默认值是项目根目录下的tsconfig.json。setupFilesAfterEnv：在运行每一个测试文件前所要执行的模块列表，它配置的模块将在 beforeEach 和 afterEach 之前执行，常用的模块有angular-jest-setup.ts、jest-zone-patch.ts。preset：指定使用的预置包。预置包会自动配置许多 jest 模块和插件，例如：jest-junit、jest-stare 等。
使用 jest-preset-angular 进行 Angular 项目的单元测试和集成测试
在项目单元测试和集成测试中，我们经常需要测试组件的输入输出，调用服务、路由、 HTTP 请求等。而粗略的测试可能会因为数据的不准确而导致测试结果的失准，进而引发项目的故障。
下面通过编写一个简单的组件来介绍 jest-preset-angular 的使用。
-- -------------------- ---- -------
------ - ---------- ------------- ------ - ---- ----------------
------------
--------- ------------------
--------- -
------ ------ ----------- --------------------- --
------- -------------------------------------------
--
--
------ ----- ------------------- -
-------- -------
--------- ---- -------------------- - --- ---------------
-------------- ------- -
-- ------------- --- --- -
---------------------
-
-
-在这个组件中，它包含一个输入框和一个按钮，当用户输入一些新的信息时，点击 Add 按钮会向外发出 add 事件，我们可以用 @Output() 装饰器来定义这一事件，并在 onClick() 方法中来处理用户的输入并发出事件。
在进行测试之前，需要先创建一个新的测试用例文件 simple-form.component.spec.ts，其中包含如下内容：
-- -------------------- ---- -------
------ - ----------------- ------- - ---- ------------------------
------ - ------------------- - ---- --------------------------
------------------------------- -- -- -
--- ---------- --------------------
--- -------- --------------------------------------
---------------- -- -- -
----- --------------------------------
------------- ----------------------
-----------------------
---
------------- -- -
------- - ---------------------------------------------
--------- - --------------------------
------------------------
---
---------- ---- --- ------- ---- --- ----- -- --- ------- -- -- -
-------------------- --------
----- ------- - --------
----- ------ - ----------------------------------------------
----- ----- - ---------------------------------------------
----------- - --------
------------------------ ----------------
---------------------------------------------------------
---
---------- --- ---- --- ------- ---- --- ----- -- ------- -- -- -
-------------------- --------
----- ------ - ----------------------------------------------
----- ----- - ---------------------------------------------
----------- - ---
------------------------ ----------------
--------------------------------------------------
---
---首先，在 beforeEach 块中调用了 TestBed 的 configureTestingModule 方法，将 SimpleFormComponent 组件加入到测试模块中，以便我们测试它用于展示的组件。
其次，在 beforeEach 块中创建了 SimpleFormComponent 的实例 component，并对它所包含的每个子组件进行了初始化。在这里，我们可以通过 TestBed.createComponent 方法来创建组件的测试实例，然后对这个实例执行 fixture.detectChanges()，便会在这个组件中渲染出相应的 HTML 元素及组件实例。
接下来，使用 Jasmine 测试框架编写了两个测试用例：
- 第一个测试用例，给输入框赋值，并点击按钮事件，测试组件能否正常发射
add事件，这个用例称为一个成功的测试用例。 - 第二个测试用例，不给输入框一个非空值，测试组件是否能够正确地发射
add事件，这个用例称为一个失败的测试用例。
需要注意的是，由于 Angular 已经将表单文字绑定到组件实例的 message 属性中，因此我们只需要直接访问这个属性就可以获得当前的值。
总结
jest-preset-angular 是一款方便易用的 Angular 项目测试工具，它能够极大地提高测试效率和可靠性。本文介绍了 jest-preset-angular 的安装和配置、常用的配置项、以及如何通过一个简单的组件写单元测试和集成测试，希望能够给大家带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/58295