Mocha 测试框架在 Angular 项目中的应用指南-JavaScript中文网-JavaScript教程资源分享门户

概述

Mocha 是 JavaScript 领域常用的一种测试框架，被广泛应用于前端、后端、桌面应用等多个场景。在 Angular 项目中，Mocha 也是一种非常有效的测试工具，可以帮助开发者更好的保证项目代码质量，并改进团队协作流程。本篇文章将详细介绍如何在 Angular 项目中应用 Mocha 测试框架。

安装 Mocha

在项目中使用 Mocha 测试框架，需要进行环境的准备和安装。我们使用 npm 进行 Mocha 的安装。打开终端，输入以下命令进行安装：

npm install mocha --save-dev

这里我们加上了 --save-dev 参数，表示 Mocha 仅在开发环境中使用。安装完成后，在项目根目录下的 package.json 文件中，devDependencies 中将会新增 Mocha 的版本号：

{
  // ...
  "devDependencies": {
    "mocha": "^9.0.3"
  }
}

编写测试用例

Mocha 的测试用例以 JavaScript 文件的形式存在，文件命名通常以 .test.js 或 .spec.js 结尾，比如 mySpec.test.js。下面我们来创建一个简单的测试用例，以保证 Mocha 正确安装并能够正确运行。

在项目中新建一个 test 目录，然后在该目录下创建一个名为 sample.spec.js 的文件，内容如下：

const assert = require('assert');

describe('sample', () => {
  it('should pass', () => {
    assert.ok(true);
  });
});

代码中，我们使用 require('assert') 引入 Node.js 内置的 assert 模块，然后编写了一个简单的测试用例，并使用了 Mocha 提供的 describe 和 it 函数进行测试用例的描述和断言。

运行测试用例

编写完测试用例后，我们需要在终端中执行测试用例。在项目根目录下，执行以下命令：

npx mocha test/**/*.spec.js

命令中 npx 表示使用当前项目中的 Mocha，test/**/*.spec.js 表示运行 test 目录下所有以 .spec.js 结尾的测试文件。

在执行完成后，我们将会看到如下输出：

  sample
    ✓ should pass


  1 passing (5ms)

输出提示表示测试用例已通过。

与 Angular 集成

在 Angular 项目中，我们通常需要进行组件、服务、管道等模块的单元测试。在 Mocha 中有很多支持库，我们可以和这些库进行集成，使得测试更加方便和高效。下面我们来介绍一些常见的 Mocha 支持库，并通过一个示例来说明如何在 Angular 中进行测试。

使用 Chai 库进行断言

在 Mocha 中，我们需要使用断言库来对测试结果进行判断。Mocha 原生支持 Node.js 中的 assert 模块，也可以使用其他支持库，比如 Chai。Chai 是一个可组合的断言库，提供了多种风格的断言方式，可以方便地匹配特定的应用场景。

在 Angular 项目中安装 Chai 库：

npm install chai chai-spies @types/chai --save-dev

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 库进行测试，需要进行如下的安装：

npm install sinon sinon-chai @types/sinon @types/sinon-chai --save-dev

在安装的同时，我们还需要安装 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

<input type="file" (change)="onFileChange($event)">

编写测试用例

以下是 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