使用 Jest 测试 Angular 应用的实践
随着前端技术的发展，我们经常需要使用测试工具来确保我们的代码能够正确地工作。Jest 是一个流行的 JavaScript 测试框架，它简单易用且功能强大。在本文中，我们将会学习如何使用 Jest 测试 Angular 应用。
准备工作
在开始之前，我们需要先安装 Jest。打开终端，运行以下命令：
npm i jest @types/jest ts-jest -D
这将会安装 Jest、Jest 的类型定义以及 TypeScript 支持插件 ts-jest。
接着，我们需要在 package.json 文件中添加以下配置：
-- -------------------- ---- -------
-
------- -
--------- ----------------------
--------------------- --------------------------------
------------------------- -
--------------------------
-----------------
--
-------------------------- -
--------------------------------------
-
-
-这些配置将会告诉 Jest 使用 jest-preset-angular 预设以及在每个测试文件运行前执行 setup-jest.ts 文件。它们还会告诉 Jest 忽略某些文件和转换某些文件。
接下来，我们需要创建 src/setup-jest.ts 文件。
-- -------------------- ---- -------
------ ----------------------
----------------------------- ------ - ------ ---- ---
----------------------------- ------------------- -
------ -- -- -
------ -
-------- -------
----------- ----------------------
--
-
---
------------------------------- ---------- -
------
---------- ------------------------------- --------------------------------------------------------------------------
---这个文件将会设置一些 Jest 用得到的全局变量。
测试组件
现在我们已经准备好了开始测试 Angular 应用了。让我们创建一个简单的组件。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<h1>Hello, world!</h1>'
})
export class AppComponent {}它会显示一个标题为“Hello, world!”的组件。
我们现在需要编写一个测试，确保组件能够正确地渲染。创建 app.component.spec.ts 文件，编写以下代码：
-- -------------------- ---- -------
------ - ------- - ---- ------------------------
------ - ------------ - ---- ------------------
------------------------ -- -- -
---------------- -- -- -
----- --------------------------------
------------- --------------
-----------------------
---
---------- ------ --- ----- -- -- -
----- ------- - --------------------------------------
----- --- - --------------------------
-------------------------
---
---------- ------ --- ------- -- -- -
----- ------- - --------------------------------------
------------------------
----- -------- - ----------------------
-----------------------------------------------------------
------- -------
--
---
---这个测试有两个部分。
第一个部分是测试是否能够创建这个组件。我们使用 TestBed 声明组件，创建一个它的实例并检查是否创建成功。
第二个部分是检查组件是否渲染成正确的 HTML 元素。我们使用 fixture.detectChanges() 方法更新视图并查找组件的 HTML 元素，确保他们被正确地渲染。
运行测试
现在我们已经编写完了测试代码，可以运行它们了。
在终端输入以下命令：
npm run test
这会启动 Jest 并运行 *.spec.ts 文件。
如果一切正常，你会看到输出如下：
-- -------------------- ---- -------
---- -----------------------
------------
- ------ ------ --- --- --- ---
- ------ ------ --- ----- -- ---
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ----- -
--- --- ---- ------ -------- -------------------因为我们的测试很简单，所以输出非常短。
结论
现在你已经知道了如何使用 Jest 测试 Angular 应用了。我们可以使用类似的方法测试组件、指令、管道、服务和路由器。这些测试可以在开发时识别问题，保证应用的质量和可靠性。
最后，以下是完整的示例代码。
/* app.component.ts */
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<h1>Hello, world!</h1>'
})
export class AppComponent {}-- -------------------- ---- -------
-- --------------------- --
------ - ------- - ---- ------------------------
------ - ------------ - ---- ------------------
------------------------ -- -- -
---------------- -- -- -
----- --------------------------------
------------- --------------
-----------------------
---
---------- ------ --- ----- -- -- -
----- ------- - --------------------------------------
----- --- - --------------------------
-------------------------
---
---------- ------ --- ------- -- -- -
----- ------- - --------------------------------------
------------------------
----- -------- - ----------------------
-----------------------------------------------------------
------- -------
--
---
----- -------------------- ---- -------
-- ------------ --
-
------- -----------------------
---------- --------
---------- -
----- -----
-------- --- -------
-------- --- -------
------- -------
------- --- ------
------ --- ----
--
---------- -----
--------------- -
---------------------- ----------
------------------ ----------
-------------------- ----------
---------------- ----------
----------------- ----------
---------------------------- ----------
------------------------------------ ----------
------------------ ----------
------- ---------
-------- ---------
---------- ---------
--
------------------ -
-------------------------------- ----------
--------------- ----------
------------------------ ----------
-------------- ----------
------- ----------
---------------------- ----------
---------- ----------
------------- --------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670894f1d91dce0dc8729c67