React 单元测试框架 —— mocha

本文详细介绍了如何使用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

通配符

  1. 制定执行 spec 目录下面的 my.jsawesome.js
mocha spec/{my,awecome}.js
  1. 指定执行 test/unit 目录下的所有 js 文件

命令行参数

  1. 查看 Mocha 的所有命令行参数
mocha --help(-h)
  1. 参数用来指定测试报告的格式,默认是 spec
mocha --repoter(-R) spec

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

npm install --save-dev mochawesome
  1. 将测试结果在桌面上显示
mocha --growl(-G)
  1. 用来监视指定的脚本测试。只要脚本测试有变化,就会自动运行 Mocha 。
mocha --wacth(-w)
  1. 只要一个测试用例没有通过,就停止执行后面的测试用例。这对持续集成很有用。
mocha --bail(-b)
  1. 用于搜索测试用例的名称(即 it 块的第一个参数),然后只执行匹配的测试用例。
mocha --grep(-g) "1 加 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 测试

  1. 首先安装 Babel
npm install babel-core babel-preset-es2015 --save-dev
  1. 配置文件,在项目目录下,新建一个 .babelrc 配置文件
/* .babelrc */
{
	"presets":["es2015"]
}
  1. 并且在 mocha.opts 文件中配置
/* mocha.opts */
--reporter tap
--recursive
--growl
--require node_modules/babel-core/register

异步测试

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

  1. 改变默认的超时设置
mocha -t 5000 timeout.test.js
  1. 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-------------")
});

测试用例管理

  1. 只要带有 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);
  });
});
  1. 只要带有 skip ,表示跳过指定的测试套件或测试用例

浏览器测试

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

  1. 初始化一个测试项目
mocha init demo10
  1. 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);
  });
});
  1. 在浏览器中打开 index.html ,就可以看到测试脚本的运行结果

生成规格文件

  1. 根据 test 目录的所有测试脚本,生成一个规格文件 spec.md,参数指定规格报告是 markdown 格式
mocha --recursive -R markdown > spec.md
  1. 生成 HTML 格式的报告 spec.html
mocha --recursive -R doc > spec.html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值