搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 米糕随笔 > mocha+Typescript的单元测试搭建

mocha+Typescript的单元测试搭建

米糕随笔 2020-07-22


关注我
更多精彩等你发现!



TDD(Test-Driven Development)测试驱动开发是敏捷开发中的一项核心的实践技术,要求在开发编写代码之前,先编写测试用例。既保证了开发过程的严谨,也对后期维护和重构有很大的帮助。今天在这里就和大家一起从0搭建一个单元测试框架。


  • 技术准备
    开发使用typescript作为主要开发语言,为了更好的理解,这里不采用任何集成框架。
    单元测试工具使用mocha,使用chai作为断言工具
    测试报告使用mochawesome作为测试报告生成工具


在这里我们使用之前已有的node + typescript项目作为示例,目录结构如下

mocha+Typescript的单元测试搭建


开始安装mocha和chai。由于我们计划结合测试typescript,并且用其作为测试用例的编写语言,因此我们还要安装@types/mocha 和 @types/chai

yarn add mocha chai @types/mocha @types/chai --save-dev

在使用之前,我们按照惯例去官网阅读一下“说明书”

按照官网的介绍,有两种方式使用mocha,一种通过mocha的cli命令通过控制台运行测试,另一种方式是通过mocha的命令生成一个框架,然后通过页面浏览器环境进行测试。这里,我们采用第一种方式,更方便进行集成测试。

首先我们创建一个待测试的代码

demo.ts:

/** * demo of origin for unit test */
export class Demo { /** * @name getSum * @description 求和demo * @param arg */ public static getSum (arg: Array<number>): number { let sum: number = 0; for (let i in arg) { sum += arg[i]; } return sum; }}

这里是一个简单的求和方法,下面搭建demo.test.ts对其进行测试

demo.test.ts

/** * demo of unit test */
import { expect } from 'chai';import { Demo } from './demo';
// Demo类的测试声明describe('Demo', function () { describe('Demo.getSum', function() { it('1+1 应该等于 2', function() { expect(Demo.getSum([1, 1])).to.be.equal(2); }); });});

describe方法用来创建一个测试描述,第一个参数是描述文本,第二个参数是实体内容,接收一个回调函数。describe是可以嵌套的,像上文中使用了两个describe分别描述了Demo和Demo的静态方法getSum,使用中可以根据自己的项目以及代码结构进行灵活分配,让测试结构更加合理。

it方法用来约定一个测试用例,回调函数中使用chai的expect函数获取结果,并通过其断言语法进行判断,这里使用.to.be.equal()方法判断1+1=2


测试文件搭建好了,接下来要使用测试用例了。但是注意,这里我们忽略了一个步骤。mocha命令运行测试用例是使用nodejs环境的,我们编写的是ts文件,可以直接运行么?答案是不可以!要想通过node环境运行ts文件,我们会想到之前给大家介绍过的神器:ts-node

那mocha如何使用ts-node呢?查询了一下,有许多现成的npm工具如ts-mocha mocha-typescript 等,已经集成了ts-node和mocha,直接拿来就可以用了。

但是,轮毂和轮胎都拿到手了,还要再换个总成么?这明显不是我性格!我们继续查找官网:

mocha+Typescript的单元测试搭建

mocha提供了 --require 参数,通过此参数可以在运行时集成某些模块。Good,我们来试试:

我们的mocha是安装在项目中,因此调用前使用yarn命令作为前缀

yarn mocha ./src/tasks/demo.test.ts --require ts-node/register

运行结果:


Demo Demo.getSum √ 1+1 应该等于 2

1 passing (19ms)


完美!官网还提供了许多命令参数,方便我们集成更多的功能和灵活的设置。但是每次通过命令运行这么多的参数,尤其是在修改的时候,太不方便了。没关系,继续阅读官网:

mocha+Typescript的单元测试搭建

mocha很贴心地提供了配置文件的方式,让我们对mocha运行的参数进行集中配置。(记住,不会了去查官网,总会有收获)

老版本的mocha使用的是opts文件,现在已经不推荐了,但提供了这四种方式。为了配置统一,我们选择package.json中集成的方式进行配置:

package.json

{ "name": "migao-node-service", "version": "0.0.0", "private": true, "scripts": { "debug": "yarn ts-node ./src/bin/www.ts", "start-f": "forever start forever.json", "start": "node ./build/bin/www.js", "status": "forever list", "stop": "forever stopall", "build": "gulp build", "test": "yarn mocha" }, "mocha": { "colors": true, "recursive": [ "src/**/*.test.ts" ], "reporter": [ "mochawesome" ], "require": [ "ts-node/register" ] }, "dependencies": { "@types/chai": "^4.2.11", "@types/mocha": "^8.0.0", "axios": "^0.19.2", "chai": "^4.2.0", "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "jade": "^1.11.0", "mocha": "^8.0.1", "mochawesome": "^6.1.1", "morgan": "~1.9.1", "pug": "^2.0.4" }, "devDependencies": { "@babel/core": "^7.9.0", "@babel/plugin-transform-typescript": "^7.9.4", "@babel/preset-env": "^7.9.0", "@babel/preset-typescript": "^7.9.0", "@types/express": "^4.17.4", "@types/node": "^13.11.0", "babel-preset-minify": "^0.5.1", "del": "^5.1.0", "gulp": "^4.0.2", "gulp-babel": "^8.0.0", "gulp-plumber": "^1.2.1", "gulp-scss": "^1.4.0", "ts-node": "^8.8.2", "typescript": "^3.8.3" }}

由于默认运行mocha命令的时候,mocha会从上下文中找到最近的匹配配置运行,因此在test命令中,直接运行yarn mocha即可

上边的mocha配置中,除了添加了之前描述过的内容以外,还添加了reporter属性,这个属性可以指定报告格式,mocha内置了许多种报告格式,但都是在控制台输出的。我们选择了mochawesome插件来作为测试报告的输出,mochawesome可以通过配置生成测试报告页面和其他格式,非常美观。我们安装一下mochawesome

yarn add mochawesome --save-dev

运行之后,我们可以在根目录获得mocha-awesome的目录,结构如下

mocha+Typescript的单元测试搭建

我们打开mochawesome.html

得到这样一个精美的报告页面。

我们抛出一个问题:如果有测试未通过的用例怎么办?我们来试一下,增加一条用例,让第一条用例测试不通过:

demo.test.ts

/** * demo of unit test */
import { expect } from 'chai';import { Demo } from './demo';
// Demo类的测试声明describe('Demo', function () { describe('Demo.getSum', function() { it('1+1 应该等于 1', function() { expect(Demo.getSum([1, 1])).to.be.equal(1); });
it('1+2 应该等于 3', function() { expect(Demo.getSum([1, 2])).to.be.equal(3); }); });});

报告结果:

在这过程中,我遇到了一个问题,mocha在运行识别到错误之后,直接退出了进程,并没有运行后面的测试用例,并且没有生成报告。经过查找,有两处需要注意:

  1. mocha的 bail和allowUncaught 需要设置为false,这里默认为false,如果添加了上述两个属性为true,则会在报错的时候退出主进程,并执行mocha提供的hooks(mocha提供了before等hooks用于在遇到错误或者用例执行失败的时候进行监控并控制流程)

  2. mocha的reporter属性中,可以设置reporterOption子属性,用于对reporter的插件进行补充设置。其中mochawesome可以设置overwrite为true来覆盖之前生成的报告,防止已存在报告目录但不会被覆盖



版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《mocha+Typescript的单元测试搭建》的版权归原作者「米糕随笔」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注米糕随笔微信公众号

米糕随笔微信公众号:so_good025

米糕随笔

手机扫描上方二维码即可关注米糕随笔微信公众号

米糕随笔最新文章

精品公众号随机推荐