在 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-recipes - debugging-jest-tests

我们如果在 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