简介
Jest 是一个流行的 JavaScript 测试框架，可以用于测试前端和 Node.js 应用程序。在本文中，我们将探讨如何使用 Jest 测试 Angular 组件。我们将学习如何编写单元测试和端到端测试，并了解如何模拟 Angular 服务和组件。
学习指南
在阅读本文之前，您需要具备以下技术知识：
- Angular 基础知识
- TypeScript 基础知识
- Node.js 知识
- Jest 基础知识
单元测试
单元测试是测试代码中的最小单元，通常是一个函数或一个类的方法。在 Angular 中，我们可以使用 TestBed 类来创建测试模块，并使用 ComponentFixture 来测试组件。
以下是一个简单的 Angular 组件：
------ - ---------- ----- - ---- ----------------
------------
--------- ---------------
--------- -
--------- -- ---- --------
-
--
------ ----- ----------------- -
-------- ----- -------
-要编写单元测试，我们可以创建一个测试文件 greeting.component.spec.ts，并编写以下代码：
------ - ----------------- ------- - ---- ------------------------
------ - ----------------- - ---- -----------------------
----------------------------- -- -- -
--- ---------- ------------------
--- -------- ------------------------------------
---------------- -- -- -
----- --------------------------------
------------- -------------------
-----------------------
---
------------- -- -
------- - -------------------------------------------
--------- - --------------------------
---
---------- ------ --- ----------- -- -- -
-------------------------------
---
---------- ------- --- ------ -- -- -
-------------- - --------
------------------------
----- -------- - ----------------------
----------------------------------------------------------------- ---------
---
---在测试文件中，我们首先导入 ComponentFixture 和 TestBed，然后创建一个测试套件。
在测试套件中，我们创建一个 beforeEach 块，使用 TestBed.configureTestingModule 方法来创建测试模块，并告诉 TestBed，我们要测试的组件是 GreetingComponent。
接下来，在另一个 beforeEach 块中，我们使用 TestBed.createComponent 方法创建 GreetingComponent 实例，并将其分配给 component 变量。
在第一个测试用例中，我们测试 component 是否已成功创建。
在第二个测试用例中，我们将 name 属性设置为 "Alice"，然后检查显示是否正确。
端到端测试
端到端测试通常也称作 E2E 测试，用于测试应用程序是否在浏览器中正常运行。在 Angular 中，我们可以使用 Protractor 来编写端到端测试。
以下是一个简单的端到端测试：
------ - -------- --- ------- - ---- -------------
--------------- -- -- -
------------- -- -
-----------------
---
---------- ------- ------- --------- -- -- -
------------------------------- ----------------------------------- -- ----------
---
---------- ------- -------- --------- -- -- -
------------------------------------------------------------
-----------------------------------------------------
---------------------------------------------------------------------------------- ---------
---
---在测试文件中，我们首先导入 browser、by 和 element，然后创建一个测试套件。
在测试套件中，我们创建一个 beforeEach 块，使用 browser.get 方法打开应用程序的首页。
在第一个测试用例中，我们使用 by.css 方法查询 app-root h1 元素，并使用 getText 方法来检查文本是否正确。
在第二个测试用例中，我们先使用 by.css 方法查询输入框和提交按钮，然后在输入框中输入 "Alice"，并点击提交按钮。
最后，我们使用 by.css 方法查询 data-test-greeting-message 元素，并使用 getText 方法检查显示是否正确。
模拟服务和组件
如果组件依赖于服务，我们可以使用 Jasmine 的 spyOn 方法来模拟服务，并测试组件调用该服务的情况。
例如，以下是一个依赖于服务的组件：
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -----------
--------- -
----------- -- ------------
------- ----------------------- -------------
----- ---- ------
-
--
------ ----- ------------ -
------ ----- -------
------------------- ------------ ------------ --
------ ---------- ---- -
----------------------------------------- -- -
--------- - -----
---
-
-要测试组件调用服务的情况，我们可以在测试文件中模拟服务：
------ - ----------------- ------- - ---- ------------------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -----------------
------------------------ -- -- -
--- ---------- -------------
--- -------- -------------------------------
--- ------------ ----------------------------
---------------- -- -- -
----------- - ----------------------------------- -------------
----- --------------------------------
------------- ---------------
---------- -
- -------- ------------ --------- ----------- -
-
-----------------------
---
------------- -- -
------- - --------------------------------------
--------- - --------------------------
---
---------- ---- --------- -- ------ ------- -- -- -
-------------------------------------------- --------
----- ------ - -----------------------------------------------------------
---------------
-----------------------------------------------
---
---在测试文件中，我们首先创建一个 jasmine.SpyObj 实例，使其具有 getData 方法。然后，我们将 DataService 作为提供者注入测试模块中。
在测试套件中，我们创建一个 beforeEach 块，使用 TestBed.configureTestingModule 方法创建测试模块。
在第一个测试用例中，我们使用 and.returnValue 方法来设置 getData 方法的返回值，并使用 querySelector 方法查询按钮元素，在按钮点击时检查是否调用了 getData 方法。
结论
在本文中，我们学习了如何使用 Jest 测试 Angular 组件。我们使用 TestBed 和 ComponentFixture 编写了单元测试，使用 Protractor 编写了端到端测试，并学习了如何模拟 Angular 服务和组件。如果您还没有熟悉 Jest 和 Angular，建议您花些时间深入学习这些技术，以便更好地理解本文。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671dd7239babaf620fb87118