前言
在 Angular 开发过程中，测试是一个十分重要的环节。常见的测试工具有 Karma 和 Jasmine。而 Jest 可以说是一种更轻量、更快速且更直观的测试工具，可以轻松地进行快照测试、异步测试等等。本文将介绍如何在 Angular 项目中使用 Jest 测试服务和组件。
准备工作
在开始之前，我们需要准备一些工作：
假定已经有一个 Angular 项目。
安装 Jest
npm install jest @types/jest ts-jest jest-preset-angular --save-dev
在 package.json 中添加 Jest 的配置
-- -------------------- ---- ------- ------- - --------- ---------------------- --------------------- - ----------------------------- -- ------------------------- - -------------------------- ------------------ ----------------------- - -在 src 目录下添加一个 setup-jest.ts 文件，在里面添加一些初始化代码用来在运行测试之前定义一些全局变量、引入测试需要的库等等。示例代码如下：
-- -------------------- ---- ------- ------ ---------------------- ------ ------------------ ------ ----------------------- ------ ------------------------------- ----- ---- - -- -- - --- ------- - --- ------ - -------- ----- ------- -- ---- -- ------- - ------------ - ------ -------- ----- ------- ------ ------- -- ------------- - ----- -- ---- ----------- ----- ------- -- ------ ------------- ------ -- -- -------- - ---- -- -- ----------------------------- --------------- - ------ ------ --- ----------------------------- ----------------- - ------ ------ --- ----------------------------- ------------------- - ------ -- -- ----------------------- --- ------------------------------- ---------- - ------ ---------- ------- ---
测试服务
在 Angular 中，服务是一个可注入的类，可以在需要的地方使用。在测试服务之前，我们需要定义一个需要测试的服务。本例中，我们将使用一个名为 HeroService 的服务，用来获取英雄数据。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- -- - ---- -------
------ - ------ - ---- ----------------
------ - ---- - ---- ---------
-------------
----------- -------
--
------ ----- ----------- -
------------- --
------------ ------------------ -
------ -----------
-
-在测试 HeroService 的时候，我们需要创建一个 HeroService 的实例，并使用其 getHeroes 方法来获取英雄数据。示例代码如下：
-- -------------------- ---- -------
------ - ------- - ---- ------------------------
------ - ----------- - ---- -----------------
----------------------- -- -- -
--- ------------ ------------
------------- -- -
--------------------------------
---------- --------------
---
----------- - ----------------------------
---
---------- -- --------- -- -- -
---------------------------------
---
---------- --- ------ ------ -- -- -
------------------------------------------ -- -
-------------------------------
------------------------------- -------
---
---
---在上面的测试代码中，我们使用了 TestBed 的配置方法将 HeroService 注入到测试环境中。同时使用 TestBed.inject 方法来获取 HeroService 的实例。
在 it 函数中，我们通过调用 HeroService 的 getHeroes 方法来检查获取的英雄数据是否正确。
测试组件
在 Angular 中，组件是一个视图和控制器的结合，可以将其看作是一个应用程序的一个小部分。组件上有许多属性和方法，包括输入属性、输出属性、周期钩子等等。
在下面的示例中，我们将测试一个名为 HeroComponent 的组件，它接受一个 @Input 属性作为英雄对象，并根据这个英雄对象显示相应的信息：
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ---------------- ------ - ---- - ---- --------------- ------------ --------- ----------- ------------ ------------------------ ---------- -------------------------- -- ------ ----- ------------- - -------- ----- ----- -
在下面的示例中，我们将测试 HeroComponent，同时，为了将 HeroComponent 的组件渲染在测试环境中，我们需要使用 Angular 提供的 ComponentFixture 工具类。示例代码如下：
-- -------------------- ---- -------
------ - ----------------- ------- - ---- ------------------------
------ - -- - ---- ----------------------------
------ - ------------- - ---- -------------------
------ - ---- - ---- ---------------
------------------------- -- -- -
--- ---------- --------------
--- -------- --------------------------------
---------------- -- -- -
----- --------------------------------
------------- ----------------
-----------------------
---
------------- -- -
------- - ---------------------------------------
--------- - --------------------------
---
---------- -------- -- -- -
-------------------------------
---
---------- ------- ---- ------ -- -- -
----- ----- ---- - - --- -- ----- --- ----- --
-------------- - -----
------------------------
----- ------- - -------------------------------------------------
-------------------------------------------------- -------
---
---------- ------- ---- ---- -- -- -
----- ----- ---- - - --- -- ----- --- ----- --
-------------- - -----
------------------------
----- ------- - -----------------------------------------------
----------------------------------------------------
---
---在上面的测试代码中，我们首先使用 TestBed 来导入 HeroComponent 组件，并使用 ComponentFixture 工具类创建 HeroComponent 的实例。
在 it 函数中，我们模拟了一个英雄对象，并将其赋值给 HeroComponent 的 input 属性。然后调用 fixture.detectChanges() 来触发 HeroComponent 的变更检测，从而更新 HeroComponent 的视图。
在 it 函数的下一行，我们使用 debugElement.query() 方法通过 CSS 选择器找到一些 HTML 元素，并使用它们的 textContent 属性来检查 HeroComponent 的视图中显示的英雄名称和 ID 是否正确。
结论
本文介绍了如何在 Angular 项目中使用 Jest 测试服务和组件。测试是一个很好的实践，在开发过程中始终保持质量，并确保代码适当地工作。了解如何使用 Jest 测试服务和组件将有助于提高您的测试技能，加强 Angular 项目的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677241026d66e0f9aad6471a