对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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 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 array 的加法操作代码
2010/07/24 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
一行代码告别document.getElementById
2012/06/01 Javascript
javascript动态加载三
2012/08/22 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python自定义线程类简单示例
2018/03/23 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
项目开发计划书
2014/01/09 职场文书
标准自荐信范文
2014/01/29 职场文书
微电影大赛策划方案
2014/06/05 职场文书
环境卫生标语
2015/08/03 职场文书
python 中的@运算符使用
2021/05/26 Python
浅谈MySQL中的六种日志
2022/03/23 MySQL
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers