React 单元测试框架 —— mocha

最新推荐文章于 2025-05-29 09:53:20 发布

原创最新推荐文章于 2025-05-29 09:53:20 发布 · 615 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用Mocha作为React应用的单元测试框架。从安装Mocha和Chai，到编写测试脚本，包括describe和it的使用，再到断言库的介绍。还涵盖了Mocha的基本用法，如通配符、命令行参数和配置文件的设置。此外，讨论了ES6测试、异步测试、测试用例的钩子、测试用例管理以及如何在浏览器中运行和生成规格文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mocha

安装

mocha

npm install mocha --save-dev

chai

npm install chai --save-dev

编写测试脚本

通常，测试脚本与所要测试的源码脚本同名，但是后缀名为 .test.js （表示测试）或者 .spec.js （表示规格）。
每个 describe 块应该包含一个或多个 it 块。

describe

describe块被称为”测试套件“，表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称（“加法函数的测试”），第二个参数是一个实际执行的函数。

it

it块被称为“测试用例”。表示一个单独的测试，是测试的最小单元。它是一个函数，第一个参数是测试用例的名称（“1 加 1 应该等于 2”），第二个参数是一个实际执行的函数。

断言库

所谓“断言”，就是判断源码的实际执行结果与预期结果是否一致，如果不一致就抛出一个错误。

mocha 的基本用法

mocha 只默认只执行 test 子目录下的第一层测试用例，不会执行更下面的用例。为了改变这种行为，就必须加上 --recursive

通配符

制定执行 spec 目录下面的 my.js 和 awesome.js

mocha spec/{my,awecome}.js

指定执行 test/unit 目录下的所有 js 文件

命令行参数

查看 Mocha 的所有命令行参数

mocha --help(-h)

参数用来指定测试报告的格式，默认是 spec

mocha --repoter(-R) spec

使用 mochawesome 模块，可以生成漂亮的 HTML 格式的报告

npm install --save-dev mochawesome

将测试结果在桌面上显示

mocha --growl(-G)

用来监视指定的脚本测试。只要脚本测试有变化，就会自动运行 Mocha 。

mocha --wacth(-w)

只要一个测试用例没有通过，就停止执行后面的测试用例。这对持续集成很有用。

mocha --bail(-b)

用于搜索测试用例的名称（即 it 块的第一个参数），然后只执行匹配的测试用例。

mocha --grep(-g) "1 加 1" // 只会匹配包含 “1 加 1” 的

只运行不符合条件的测试脚本，必须与 --grep 参数配合使用

mocha --grep "1 加 1" --invert(-i)

配置文件 mocha.opts

mocha 允许在 test文件下配置 mocha.opts 文件

/* mocha.opts */
--reporter tap
--recursive
--growl

配置好 mocha.opts 之后直接 mocha

如果测试用例不是存放在 test 子目录，可以在 mocha.opts 写入以下内容 server-tests--recursive

ES6 测试

首先安装 Babel

npm install babel-core babel-preset-es2015 --save-dev

配置文件，在项目目录下，新建一个 .babelrc 配置文件

/* .babelrc */
{
	"presets":["es2015"]
}

并且在 mocha.opts 文件中配置

/* mocha.opts */
--reporter tap
--recursive
--growl
--require node_modules/babel-core/register

异步测试

mocha 默认每个测试用例最多执行2000毫秒，如果到时没有得到结果，就报错。

改变默认的超时设置

mocha -t 5000 timeout.test.js

it 块执行的时候，传入一个 done 参数，当测试结束的时候，必须显式调用这个函数，告诉 Mocha 测试结束了。否则，Mocha 就无法知道，测试是否结束，会一直等到超时报错。

mocha -t 5000 -s(-show) 1000 timeout.test.js

测试用例的钩子

Mocha 在describe 块之中，提供测试用例的四个钩子：before()、after()、beforeEach() 和 afterEach()

before(function() {
	    // 在本区块的所有测试用例之前执行
	    console.log("----First layer----before-------------")
});
after(function() {
	    // 在本区块的所有测试用例之后执行
	    console.log("----First layer----after-------------")
});
beforeEach(function() {
	    // 在本区块的每个测试用例之前执行
	    console.log("----First layer----beforeEach-------------")
});
afterEach(function() {
	    // 在本区块的每个测试用例之后执行
	    console.log("----First layer----afterEach-------------")
});

测试用例管理

只要带有 only 方法的测试用例会运行

/* add.test.js */
describe('加法函数的测试', function() {
  it.only('1 加 1 应该等于 2', function() {
    expect(add(1, 1)).to.be.equal(2);
  });

  it('任何数加0应该等于自身', function() {
    expect(add(1, 0)).to.be.equal(1);
  });
});

只要带有 skip ，表示跳过指定的测试套件或测试用例

浏览器测试

除了在命令行运行，Mocha 还可以在浏览器运行。

初始化一个测试项目

mocha init demo10

在 tests.js 里面写入测试脚本

/* tests.js */
var expect = chai.expect;

describe('加法函数的测试', function() {
  it('1 加 1 应该等于 2', function() {
    expect(add(1, 1)).to.be.equal(2);
  });

  it('任何数加0等于自身', function() {
    expect(add(1, 0)).to.be.equal(1);
    expect(add(0, 0)).to.be.equal(0);
  });
});