概述
Mocha 是 JavaScript 领域常用的一种测试框架，被广泛应用于前端、后端、桌面应用等多个场景。在 Angular 项目中，Mocha 也是一种非常有效的测试工具，可以帮助开发者更好的保证项目代码质量，并改进团队协作流程。本篇文章将详细介绍如何在 Angular 项目中应用 Mocha 测试框架。
安装 Mocha
在项目中使用 Mocha 测试框架，需要进行环境的准备和安装。我们使用 npm 进行 Mocha 的安装。打开终端，输入以下命令进行安装：
--- ------- ----- ----------
这里我们加上了 --save-dev 参数，表示 Mocha 仅在开发环境中使用。安装完成后，在项目根目录下的 package.json 文件中，devDependencies 中将会新增 Mocha 的版本号：
-
-- ---
------------------ -
-------- --------
-
-编写测试用例
Mocha 的测试用例以 JavaScript 文件的形式存在，文件命名通常以 .test.js 或 .spec.js 结尾，比如 mySpec.test.js。下面我们来创建一个简单的测试用例，以保证 Mocha 正确安装并能够正确运行。
在项目中新建一个 test 目录，然后在该目录下创建一个名为 sample.spec.js 的文件，内容如下：
----- ------ - ------------------
------------------ -- -- -
---------- ------ -- -- -
----------------
---
---代码中，我们使用 require('assert') 引入 Node.js 内置的 assert 模块，然后编写了一个简单的测试用例，并使用了 Mocha 提供的 describe 和 it 函数进行测试用例的描述和断言。
运行测试用例
编写完测试用例后，我们需要在终端中执行测试用例。在项目根目录下，执行以下命令：
--- ----- -----------------
命令中 npx 表示使用当前项目中的 Mocha，test/**/*.spec.js 表示运行 test 目录下所有以 .spec.js 结尾的测试文件。
在执行完成后，我们将会看到如下输出：
------
- ------ ----
- ------- -----输出提示表示测试用例已通过。
与 Angular 集成
在 Angular 项目中，我们通常需要进行组件、服务、管道等模块的单元测试。在 Mocha 中有很多支持库，我们可以和这些库进行集成，使得测试更加方便和高效。下面我们来介绍一些常见的 Mocha 支持库，并通过一个示例来说明如何在 Angular 中进行测试。
使用 Chai 库进行断言
在 Mocha 中，我们需要使用断言库来对测试结果进行判断。Mocha 原生支持 Node.js 中的 assert 模块，也可以使用其他支持库，比如 Chai。Chai 是一个可组合的断言库，提供了多种风格的断言方式，可以方便地匹配特定的应用场景。
在 Angular 项目中安装 Chai 库：
--- ------- ---- ---------- ----------- ----------
chai 和 @types/chai 为 Chai 库的核心包，chai-spies 是 Chai 库提供的用于监测函数调用的插件。
接着我们更新 sample.spec.js 文件的内容，改用 Chai 断言库进行测试：
----- ---- - ----------------
----- ----- - ----------------------
----------------
------------------ -- -- -
---------- ------ -- -- -
---------------------
---
---------- --- -- -------- ------ -- ---
----- --- - ----------- -- ----
------
---------------------------------------
---
---在代码中，我们在 describe 函数中引入了 chai 断言库，并引入了 chai-spies 插件。在 it('should spy on function call') 中，我们编写了一个模拟函数的测试用例，创建了一个 spy，用于监测函数的调用情况，并断言函数已被调用。
使用 Sinon 库进行函数与异步测试
Sinon 是一个强大的测试框架，可以用于测试 JavaScript 中的函数、异步代码、多浏览器的兼容性与 Ajax 等情况。在 Angular 项目中使用 Sinon 库进行测试，需要进行如下的安装：
--- ------- ----- ---------- ------------ ----------------- ----------
在安装的同时，我们还需要安装 sinon-chai 插件，用于简化 Sinon 与 Chai 的集成。
我们可以在 sample.spec.js 文件中添加一个 Sinon 的例子：
----- ----- - -----------------
----- --------- - ----------------------
--------------------
----------------- -- -- -
---------- --- -- ---------- -- -- -
----- -- - -------------
-----
--------------------------------------
---
---------- ---- -- ----- ---------- ----- -- -- -
----- ---- - - ----- ----- --
----- ------- - ----------------------
----- --------- - ----------------------------
----- ------ - ----- ------------
---------------------------------------------
-----------------------------------
---
---在代码中，我们在 describe 函数中引入了 sinon 和 sinon-chai 库，并编写了两个测试用例，分别用于监测函数和异步函数的调用情况。通过使用 sinon.fake 创建伪造函数以及 sinon.fake.returns 指定函数的返回值，我们可以轻松地模拟异步函数的返回值，方便地编写异步测试用例。
示例
接下来，我们以一个简单的 Angular 组件为例，来说明如何使用 Mocha 测试框架进行单元测试。
编写组件
file-upload.component.ts
------ - ---------- ------------- ------ - ---- ----------------
------------
--------- ------------------
------------ -------------------------------
--
------ ----- ------------------- -
--------- ------ - --- ---------------------
------------------- ------ -
----- ----- - ------------ -- -----------------
----- ----- - ------------
-- ------------- - -- -
---------------------------
-
-
-file-upload.component.html
------ ----------- --------------------------------
编写测试用例
以下是 file-upload.component.spec.ts 文件的代码：
------ - ----------------- ------- - ---- ------------------------
------ - -- - ---- ----------------------------
------ - ------------------- - ---- --------------------------
------------------------------- -- -- -
--- ---------- --------------------
--- -------- --------------------------------------
---------------- -- -- -
----- --------------------------------
------------- ----------------------
-----------------------
---
------------- -- -
------- - ---------------------------------------------
--------- - --------------------------
------------------------
---
---------- -------- -- -- -
-------------------------------
---
---------- ---- ----- ---- ---- --------- -- -- -
----- ---- - --- ------------- -------- ----------- - ----- ------------ ---
----- -------- - -------------
-------------------------------------
----- ----- - ---------------------------------------------------------------------
----------------------- -----------------
--------------------------------------------
-------------------------------------------------------------
---
---在测试文件中，我们使用了 Angular 的 ComponentFixture 来测试 Angular 组件，将 FileUploadComponent 组件注入到 TestBed.configureTestingModule 中，并使用 fixture.detectChanges() 函数进行组件的初始化。
在 it('should emit event when file changed') 中，我们编写了一个测试用例，用于检测在组件中的 onFileChange 函数是否正确地触发了 upload 事件。在测试用例中，我们创建了一个伪造 File 对象，并使用 sinon.fake 登记了 upload 事件，然后通过 fixture.debugElement.query(By.css()) 获取到 DOM 中的 <input> 元素，并手动触发 change 事件。
最后断言 upload 事件已经被触发，并且参数与之前创建的 File 对象相同。
总结
本篇文章中，我们简要介绍了 Mocha 测试框架在 Angular 项目中的应用指南。我们通过安装 Mocha 并编写测试用例，展示了如何使用 Mocha 进行单元测试。同时，我们也介绍了常见的 Mocha 基础库，如 Chai 和 Sinon，并结合示例代码，对比了两个不同测试库的使用方法，可以有效地辅助我们进行 Angular 项目的测试工作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ddd80bf6b2d6eab391d265