在 TypeScript 开发中，我们需要为开发的模块编写单元测试，可以使用 jest 这个框架。可参考 npm - jest
如果你已经有一个 TypeScript 项目，现在要为其添加测试用例。步骤如下：
1. 安装 jest 依赖
首先使用下面的命令安装 npm 依赖：
npm install -D jest ts-jest @types/jest
2. 配置 jest
2.1. package.json
{
// ...
"scripts": {
"build": "tsc",
"test": "jest",
"test-c": "jest --coverage"
},
"jest": {
"testEnvironment": "node"
},
// ...
}
2.2. jest.config.js
在项目根目录新建 jest.config.js 文件，如下：
module.exports = {
roots: [
"<rootDir>/test"
],
testRegex: 'test/(.+)\\.test\\.(jsx?|tsx?)$',
transform: {
"^.+\\.tsx?$": "ts-jest"
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};
3. 编写 test 用例
当前，我们的项目目录结构如下：
your-project
|- src
| |- HelloWorld.ts
| |- ...
|
|- package.json
|- tsconfig.json
|- jest.config.js
|
|- test
| |- HelloWorld.test.ts
| |- ...
|
我们的 HelloWorld.test.ts 编写如下：
/**
* HelloWorld.test.ts
*/
import hello from '../src/HelloWorld';
test('hello world test', () => {
expect(hello('message')).toBe(true);
});
然后执行 npm run test 即可运行测试用例。
4. 覆盖率报告
我们如果想得到每行代码的覆盖率执行报告，可以使用 npm run test-c 命令，它其实是在执行 jest 的时候带了 --coverage 参数。生成的报告如下：
file-list
点开具体的文件，可以看到每行的执行覆盖情况：
file-details
5. VSCode 调试
我们如果在 VSCode 环境下，需要调试用例，则可以进行如下配置，在 .vscode/launch.json 文件中：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest All",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": ["--runInBand"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
},
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"${fileBasenameNoExtension}",
"--config",
"jest.config.js"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
}
]
}
然后在左侧 Debug Panel 进行调试，可以选择 Jest All 调试所有 test 文件；或者选择 Jest Current File 调试当前选中的 test 文件。如下：
jest debug
