JavaScript单元测试的“抹茶”组合:Mocha和Chai

简介: mocha是一个javascript的测试框架,chai是一个断言库,两者搭配使用更佳,所以合称“抹茶”(其实mocha是咖啡)。“抹茶”特点是: 简单,node和浏览器都可运行。

mocha是一个javascript的测试框架,chai是一个断言库,两者搭配使用更佳,所以合称“抹茶”(其实mocha是咖啡)。“抹茶”特点是: 简单,node和浏览器都可运行。

  • BDD:Behavior Driven Development,行为驱动开发,注重测试逻辑
  • TDD:Test-Driven Development,测试驱动开发,注重输出结果

Mocha

Mocha是一个功能丰富的JavaScript测试框架,可以运行在 node 和浏览器上,使异步测试变得简单而有趣。Mocha在运行测试用例过程中,当捕获到错误时,依旧能够灵活地运行精确的报告。mocha 默认的模式是 BDD

官网:mochajs.org/

Node.js 中,目前比较流行的单元测试组合是 mocha + chaimocha 是一个测试框架,chai 是一个断言库,所以合称”抹茶”。

安装

npm install --g mocha

运行

//mocha [debug] [options] [files]
mocha --recursive test

基本方法

Mocha 有三个基本方法:

  • describe(moduleName, function)

describe 是可嵌套的,描述测试用例是否正确。

describe('测试模块的描述', function() {
  // ....
});
  • it(info, function)

info为描述性说明。一个it对应一个单元测试用例。

describe('单元测试的描述,一般写明用途和返回值', function() {
  // ....
});
  • assert.equal(exp1, exp2)

mocha 的断言语句,判断 exp1 是否等于 exp2

异步代码测试

  • done

一个 it 里面只有一个 done

done 标识回调的最深处,也是嵌套回调函数的末端。

describe('User', function() {
  describe('#save()', function() {
    it('should save without error', function(done) {
      var user = new User('Luna');
      user.save(done);
    });
  });
});

Test Hooks方法

before()after()beforeEach()afterEach() 是基于 BDD 风格提出的,用于预处理和 test 后的处理。

Test Hooks 方法的几个注意点:

  • beforeEach 会对当前 describe 下的所有子 case 生效;
  • beforeafter 的代码没有特殊顺序要求;
  • 同一个 describe 下的执行顺序为 beforebeforeEachafterEachafter
  • 当一个 it 有多个 before 的时候,执行顺序是从最外围的 describebefore 开始,其他同理。
describe('hooks', function() {
  before(function() {
    // runs before all tests in this block
  });
  after(function() {
    // runs after all tests in this block
  });
  beforeEach(function() {
    // runs before each test in this block
  });
  afterEach(function() {
    // runs after each test in this block
  });
  // test cases
});

Hooks 的三种写法:

beforeEach(function() {
});
beforeEach(function nameFun() {
});
beforeEach("some description", function() {
});

only()、skip()函数

describe 块和 it 块都允许调用 only()skip() 方法。

only() 方法表示在当前的父 describe 块下,只执行该单元的测试。

skip() 方法表示在当前的父 describe 块下,跳过不执行该单元的测试。

当在一个 describe 块下,同时存在 only()skip() 方法,则只执行 .only() 方法。

describe('Array', function() {
  describe.only('父describe块下只执行该测试单元', () => {
    it.skip('跳过的测试单元', () => { //... });
  });
  describe('不执行', () => { //... });
});

常用命令参数

--recursive 遍历子目录下的全部文件

Mocha 默认运行 /test 子目录里面的测试脚本。

Mocha默认只执行 /test 子目录下第一层的测试用例。

所以,应加上– recursive 参数,使全部子目录下的测试用例都能被执行。

mocha --recursive

-u tdd 执行 TDD 模式

mocha默认的模式是 BDD ,要想执行 TDDtest 时需要加上参数,如:

mocha -u tdd test.js

--watch, -w 监听脚本变化

--watch 参数用来监视指定的测试脚本。当脚本发生变化,就会自动运行mocha。

mocha --watch

--bail, -b 参数指定只要有一个测试用例没有通过,就停止执行后面的测试用例。这对持续集成很有用。

mocha --bail

-timeout, -t 指定超时门槛

Mocha默认每个测试用例最多执行2000毫秒。如果2000毫秒后还没有执行完成,则报错。-t可执行超时门槛。

mocha -t 5000 test.js

Chai断言库

Chai是一个BDD/TDD模式的大而全的断言库,可以在node和浏览器环境运行,可以高效的和任何js测试框架搭配使用。

官网:www.chaijs.com/

安装

npm install -g chai

覆盖率

既然是给功能代码写单元测试,那就应该有个指标去衡量单元测试覆盖了哪些功能代码,这就是接下来要介绍的测试覆盖率。

Node.js 中,我们使用 istanbul 作为覆盖率统计的工具,istanbul 可以帮助我们统计到代码的语句覆盖率、分支覆盖率、函数覆盖率以及行覆盖率,生成的报告如下:

istanbul cover error.js

image.png

谢谢


相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
112 1
|
2月前
|
人工智能 监控 JavaScript
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
32 1
|
7月前
|
Web App开发 JavaScript 前端开发
《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
【5月更文挑战第3天】本文介绍了如何在Web自动化测试中使用JavaScript执行器(JavascriptExecutor)来完成Selenium API无法处理的任务。首先,需要将WebDriver转换为JavascriptExecutor对象,然后通过executeScript方法执行JavaScript代码。示例用法包括设置JS代码字符串并调用executeScript。文章提供了两个实战场景:一是当时间插件限制输入时,用JS去除元素的readonly属性;二是处理需滚动才能显示的元素,利用JS滚动页面。还给出了一个滚动到底部的代码示例,并提供了详细步骤和解释。
105 10
|
2月前
|
JavaScript 前端开发
JavaScript - 测试 Prototype
JavaScript - 测试 Prototype
16 0
|
2月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
15 0
|
4月前
|
Web App开发 应用服务中间件 定位技术
three.js:三维模型加载量测试
three.js:三维模型加载量测试
202 4
|
4月前
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
83 0
|
4月前
|
JavaScript 前端开发 应用服务中间件
【qkl】JavaScript连接web3钱包,实现测试网络中的 Sepolia ETH余额查询、转账功能
【区块链】JavaScript连接web3钱包,实现测试网络中的 Sepolia ETH余额查询、转账功能
129 0
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的高中信息技术课程在线测试系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的高中信息技术课程在线测试系统附带文章和源代码部署视频讲解等
54 6
下一篇
DataWorks