如今，前端应用的开发越来越复杂，使得测试变得更加重要。Jest 是一个快速又高效的测试框架，它被认为是 JavaScript 世界中最流行的测试框架之一。在这篇文章中，我们将讨论在 Angular 应用中使用 Jest 进行测试的最佳实践。
安装 Jest
首先，你需要安装 Jest。可以通过以下命令进行安装：
npm install jest
然后为您的 Angular 项目添加 jest 的配置文件。
-- -------------------- ---- -------
-
--------- ----------------------
--------------------- -
-------------------------
--
------------------------- -
--------------------------
------------------
--------------------
--
---------- -
---------- -
----------- ------------------------------
-
-
-单元测试
首先让我们从单元测试开始，这是测试 Angular 应用程序中最基本的测试。
组件测试
在我们开始测试 Angular 组件之前，让我们创建一个 greeting 组件：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ---------------
--------- -
----------- -- ---- -------
-
--
------ ----- ----------------- -
-------- ------ -------
-现在，我们可以为这个组件编写一个简单的单元测试：
-- -------------------- ---- -------
------ - -------- ---------------- - ---- ------------------------
------ - ----------------- - ---- -----------------------
----------------------------- -- -- -
--- ---------- ------------------
--- -------- ------------------------------------
---------------- -- -- -
----- --------------------------------
------------- -------------------
-----------------------
---
------------- -- -
------- - -------------------------------------------
--------- - --------------------------
-------------- - ----------
------------------------
---
---------- ------ --- ---------- -- -- -
----- -------- - ------------------------------------------
----------------------------------------------- ----------
---
---我们使用 describe 来定义一个测试套件，并通过 beforeEach 进行测试前的预处理。然后，我们进行测试并使用 expect 来断言测试结果。
服务测试
我们可以在 Angular 中使用服务来组织和共享代码。这时，为了确保服务能够按照预期运行，我们需要对其进行测试。在 Angular 中，可以使用 TestBed 来创建一个测试环境。
让我们看一下如何测试一个简单的服务：
-- -------------------- ---- -------
------ - ------- - ---- ------------------------
------ - --------------- - ---- ---------------------
--------------------------- -- -- -
--- -------- ----------------
------------- -- -
-----------------------------------
------- - --------------------------------
---
---------- -- --------- -- -- -
-----------------------------
---
---------- ------ --- -------- --------- -- -- -
---------------------------------------------------- ----------
---
---在这个测试中，我们首先使用 TestBed 来创建一个测试环境并获取服务实例，然后进行测试并使用 expect 来断言测试结果。
集成测试
在单元测试中，我们测试了每个组件和服务的行为，并确保它们按照预期运行。但是，在实际情况下，我们不添加太多的实际测试，而是集成测试，来确保整个应用程序按照预期运行。
组件集成测试
要测试一个组件的集成，我们需要模拟它与它的父组件进行交互的情况。在 Angular 中，为了模拟父组件，我们可以使用 ComponentFixture。
让我们看一下如何通过集成测试来确保我们的 greeting 组件能够正确地在父组件中工作。
-- -------------------- ---- -------
------ - ----------------- ------- - ---- ------------------------
------ - ----------------- - ---- -----------------------
----------------------------- -- -- -
--- ---------- ------------------
--- -------- ------------------------------------
---------------- -- -- -
----- --------------------------------
------------- -------------------
-----------------------
---
------------- -- -
------- - -------------------------------------------
--------- - --------------------------
-------------- - ----------
------------------------
---
---------- ------ --- ---------- -- -- -
----- -------- - ------------------------------------------
----------------------------------------------- ----------
---
---------- ------- --- ---- ----- ---- --- -------- -- -- -
-------------- - --------
------------------------
----- -------- - ------------------------------------------
----------------------------------------------- --------
---
---在这个测试中，我们首先创建了一个 FixtureComponent 实例，它模拟了 GreetingComponent 和它的父组件。然后我们测试组件渲染以及从父组件接收输入名称的情况。
服务集成测试
测试服务集成时，我们需要测试它与模块和其他服务之间的交互。在 Angular 中，我们可以使用 TestBed 来创建一个集成测试环境。
让我们看一下如何测试我们的 greeting 服务来确保它与 http 服务正常运作：
-- -------------------- ---- -------
------ - ------- - ---- ------------------------
------ - ------------------------ --------------------- - ---- -------------------------------
------ - --------------- - ---- ---------------------
--------------------------- -- -- -
--- -------- ----------------
--- ---------------------- ----------------------
------------- -- -
--------------------------------
-------- --------------------------
---------- -----------------
---
--------------------- - --------------------------------------
------- - --------------------------------
---
------------ -- -
-------------------------------
---
---------- -- --------- -- -- -
-----------------------------
---
---------- ------ --- -------- ---- ------ -- -- -
----- -------- - -------- ---------
---------------------------------------------- -- -
-------------------------------
---
----- --- - ----------------------------------------------------------------
------------------------------------------
--------------------
---
---在这个测试中，我们首先使用 HttpClientTestingModule 导入 httpClient 相关的依赖，以及 其他必要的依赖，然后在测试期间使用 TestBed 获取服务实例。
在测试完成之后，我们使用 httpTestingController 来验证一个请求是否被发送，并使用 expectOne 来模拟请求并获取响应。
总结
Jest 是一个功能强大的 JavaScript 测试框架，越来越多的前端开发者选择在他们的项目中使用该框架进行测试。在这篇文章中，我们讨论了使用 Jest 进行 Angular 应用测试的最佳实践，以及如何编写符合要求的单元测试和集成测试。希望本文能够帮助你在将来的项目中更好地进行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f7d2e3f6b2d6eab3002b5d