对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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
RxJS的入门指引和初步应用
Jun 15 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 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基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python 修改列表中的元素方法
2018/06/26 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python如何获取文件指定行的内容
2020/05/27 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
python源文件的字符编码知识点详解
2021/03/04 Python
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
十八大宣传标语
2014/10/09 职场文书
检讨书1000字
2014/10/11 职场文书
采购员工作总结范文
2015/08/12 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python