前言
针对 Angular 应用，使用 Jest 进行单元测试是一个非常好的选择。Jest 是一种简单且强大的 JavaScript 测试框架，支持单元测试、集成测试和快照测试。在这篇文章中，我们将详细介绍在 Angular 应用中如何使用 Jest 进行单元测试。
安装
首先，我们需要对 Jest 进行安装。在项目中执行以下命令：
--- ------- ---------- ---- ------------------- -----------
配置
接下来，我们需要在项目中添加 Jest 配置文件。在项目根目录下创建一个文件 jest.config.js ，添加以下内容：
-------------- - - ------- ---------------------- ------ ------------------ ---------- -------------------------- ------------------- -------------------------------- ---------------- ----- ------------------ -------- --
其中，preset 会告诉 Jest，我们使用的是 Angular 项目预设的配置。roots 是指测试文件所在的目录，testMatch 是用来匹配测试文件。在 setupFilesAfterEnv 中，我们可以写一些在运行测试前需要进行的操作，如全局的 mock，或是全局的一些设置。
编写测试
接下来，我们需要编写一些测试用例。在编写测试用例之前，我们需要修改以下文件。
修改 tsconfig.json 对测试文件的支持
在 tsconfig.json 文件中添加以下配置：
-
------------------ -
-------- -------- -------
--
---------- --------------- -------------------
-其中，types 中添加了 jest ，这是为了在测试文件中可以更加方便地使用 Jest ，include 中添加了 **/*.spec.ts ，这是为了让 TypeScript 在编译时也将测试文件一起编译，否则测试文件中就无法使用项目中的代码了。
修改 karma.conf.js 文件
在 karma.conf.js 文件中，我们需要注释掉对测试文件的引入。在 karma.conf.js 文件的 files 数组中添加以下代码：
-- - -------- ---------------- -------- -------
-- -
-- -------- -------------------------------------------------------------------
-- -------- -----
-- -编写测试用例
接下来，我们来编写一个组件测试用例。
------ - ------ ----------------- ------- - ---- ------------------------
------ - ----------- - ---- -----------------
----------------------- -- -- -
--- ---------- ------------
--- -------- ------------------------------
------------------- -- -
--------------------------------
------------- - ----------- -
--
---------------------
----
------------- -- -
------- - -------------------------------------
--------- - --------------------------
------------------------
---
---------- -------- -- -- -
-------------------------------
---
---------- ------ ------- -- -- -
----- ----- - ------------------------------------------
---------------------------------------------
---
---------- ------ ------- -- -- -
--------------- - ---- -------
------------------------
----- ----- - ------------------------------------------
---------------------------------------- --------
---
---该测试用例会自动创建一个组件实例，并测试：
- 组件是否创建成功
- 组件的标题是否正确显示
- 组件的标题是否可以成功更改
我们可以使用 $ ng test 命令执行这个测试用例。
总结
在本篇文章中，我们介绍了如何在 Angular 应用中使用 Jest 进行单元测试的步骤和方法。当然，我们只是介绍了其中一部分，更多的功能和特性请查看 Jest 官方文档。希望这篇文章能够帮助你更好地学习 Jest 和 Angular 单元测试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652ba96e7d4982a6ebd71146