使用Mocha测试框架实现TS单元测试

1、背景

当前项目使用ts作为开发语言，想要引入单元测试，自行百度后选择主流框架之一Mocha进行尝试。

2、Mocha简介

mocha是JavaScript的一种单元测试框架，既可以在浏览器环境下运行，也可以在Node.js环境下运行。

使用mocha，我们就只需要专注于编写单元测试本身，然后，让mocha去自动运行所有的测试，并给出测试结果。

mocha的特点主要有：

1. 既可以测试简单的JavaScript函数，又可以测试异步代码，因为异步是JavaScript的特性之一；

2. 可以自动运行所有测试，也可以只运行特定的测试；

3. 可以支持before、after、beforeEach和afterEach来编写初始化代码。

Mocha中文网 - 有趣、简单、灵活的javascript测试框架https://mochajs.cn/

3、环境配置

安装Mocha和断言库chai

这里需要在全局和本地都进行安装

npm install --global mocha
npm install --save mocha
npm install --global chai
npm install --save chai
npm install -D '@types/chai' '@types/mocha' '@types/node' '@types/sinon'
npm install -D mocha chai cross-env nyc sinon ts-node tsconfig-paths

安装完成后我们来添加一下所需的配置：

添加 mocha 配置：打开 package.json，新增 mocha 字段并添加新的 scripts 命令，如下：

{"scripts": {"test": "cross-env TS_NODE_PROJECT='test/tsconfig.test.json' mocha test/**/**.test.ts","cover": "nyc --reporter=html npm run test"},"mocha": {"require": ["ts-node/register","tsconfig-paths/register"],"ui": "bdd"}
}

其中 ts-node/register 用于执行 ts 测试代码，而 tsconfig-paths/register 则用于解析 tsconfig 里配置的路径别名。

配置测试环境 tsconfig：接下来我们新建 test 文件夹，之后的测试用例都可以写在这里，然后新建 tsconfig.test.json 并填入如下内容：

{"extends": "../tsconfig.json","ts-node": {"transpileOnly": true}
}

这里的 extends 指向了根目录下的 tsconfig.json。但是实际上需要根据需要来进行设置，这个extends个人感觉不需要，因为项目里面的tsconfig很可能会有坑。

至此，配置就已经结束了。

测试用例例子，这里简单引用了一个testfunc.ts模拟接口来源：

import { expect } from 'chai'
// import { spy } from 'sinon'
import { add, cal} from './src/testfunc';describe('测试index.js', () => {before(() => console.info("在本区块的所有测试用例之前执行"))after(() => console.info("在本区块的所有测试用例之后执行"))beforeEach(() => console.info("在本区块的每个测试用例之前执行"))afterEach(() => console.info("在本区块的每个测试用例之后执行"))describe('测试addNum函数', () => {it('两数相加结果为两个数字的和', () => {expect(add(1, 2)).to.be.equal(3);})})describe('测试addNum函数', () => {it('两数相加结果为两个数字的和', () => {expect(cal(1, 2)).to.be.equal(5);})})
})

testfunc.ts:

import { multiply } from "./testFunc2";export function add(a: number, b: number): number {return a + b;
}export function cal(a: number, b: number): number {return add(a, b) + multiply(a, b);
}

执行结果如下：

 至此，使用mocha作为测试框架对TS项目的接口函数进行单元测试的全流程基本走通

遇到的坑：

1、mocha和chai的安装，需要global+dev+-D都要装，还有@types/mocha这种依赖包，需要加单引号，否则npm命令无法执行。

2、tsconfig里面compilerOptions里面的module不能设置为esnext，如果不是必要，请不要引用根目录的tsconfig（个人理解）。