对TypeScript库进行单元测试的方法


Posted in Javascript onJuly 18, 2019
原文发布于2017年7月,为保证能正常运行,其中部分命令进行了调整。

当时TypeScript版本为2.x,但依旧具有借鉴意义。

单元测试能限制你库中Bug的「生长」。随着编写的库越来越大,你不能总是手工测试每个特性。但你可以使用单元测试来测试每个特性,并且编写起来并不难。下面展示如何在Typescript中设置单元测试!

步骤1:安装用于单元测试的包

单元测试assert(推断)代码中一些属性。例如你有一个方法add(x,y),其应该正确地将xy相加,通过单元测试你可以进行如下测试assert(add(3,4)).equals(7)

一些用于单元测试的库提供了好用的assert方法来执行测试。我们这里使用了Mocha和Chai,通过如下命令进行安装:

npm i mocha @types/mocha chai @types/chai ts-node typescript --save-dev

步骤2:编写第一个单元测试

假设你有以下单元:

typescript-library/src/math.ts

export function add(x: number, y: number) {
 return x + y;
}

那对应的单元测试可能是这样的:

typescript-library/src/math.test.ts

import { add } from './math';

import * as mocha from 'mocha';
import * as chai from 'chai';

const expect = chai.expect;
describe('My math library', () => {

 it('should be able to add things correctly' , () => {
  expect(add(3,4)).to.equal(7);
 });

});

步骤3:运行单元测试

您可以使用以下命令运行测试:

./node_modules/mocha/bin/mocha --reporter spec --require ts-node/register src/**/*.test.ts

然后应该会在控制台中看到一个输出,如下所示:

对TypeScript库进行单元测试的方法

您可以将这个长命令放入package.json中转换成"scripts:{"test":"…"}"然后用npm test运行测试。也就是说此时的package.json应该是:

{
 "devDependencies": {
  "@types/chai": "^4.1.7",
  "@types/mocha": "^5.2.7",
  "chai": "^4.2.0",
  "ts-node": "^8.3.0",
  "mocha": "^6.1.4"
 },
 "scripts": {
  "test": "./node_modules/mocha/bin/mocha --reporter spec --require ts-node/register src/**/*.test.ts"
 }
}

如果您想运行单独的某个单元测试,可以用./node_modules/mocha/bin/mocha --reporter spec --grep "TestName" --require ts-node/register src/**/*.test.ts。“TestName”可以是任何的describe值,在本例中就如./node_modules/mocha/bin/mocha --reporter spec --grep "My math library" --require ts-node/register test/**/*.test.ts

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Opacity.js
Jan 22 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 #Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 #Javascript
vue使用video.js进行视频播放功能
Jul 18 #Javascript
百度小程序之间的页面通信过程详解
Jul 18 #Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 #Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 #Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 #Javascript
You might like
深入php var_dump()函数的详解
2013/06/05 PHP
php页面防重复提交方法总结
2013/11/25 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python常用知识点汇总
2016/05/08 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
Python argparse模块应用实例解析
2019/11/15 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
mysql查询结果实现多列拼接查询
2022/04/03 MySQL