Typescript 项目使用 jest 进行单元测试

发表于2019-12-11更新于2019-12-11

安装依赖

1
npm install --save-dev typescript jest ts-jest @types/jest

创建jest配置文件

1
npx ts-jest config:init

配置jest，往jest.config.js中添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
const { default: tsjPreset } = require('ts-jest/presets');
module.exports = {
  roots: ["<rootDir>/tests"],
  verbose: true,
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  globals: {
    "ts-jest": {
      diagnostics: false
    }
  }
}

在package.json中添加脚本

1
2
3
4
5
{
  "scripts": {
    "test": "jest --collectCoverage"
  }
}

创建测试文件

1
2
3
mkdir tests
cd tests
touch index.test.ts

src/index.ts //待测试文件

1
2
3
export function sum(a: number, b: number) {
  return a + b;
}

index.test.ts

1
2
3
4
import { sum } = from '../src/index';
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

配置tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "compilerOptions": {
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    "outDir": "./dist/",                        /* Redirect output structure to the directory. */
    "rootDir": "./src/",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  },
  "exclude": ["node_modules", "tests/**/*.test.ts"]
}

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.
├── coverage
│   ├── clover.xml
│   ├── coverage-final.json
│   ├── lcov-report
│   │   ├── base.css
│   │   ├── block-navigation.js
│   │   ├── index.html
│   │   ├── index.ts.html
│   │   ├── prettify.css
│   │   ├── prettify.js
│   │   ├── sort-arrow-sprite.png
│   │   └── sorter.js
│   └── lcov.info
├── dist
│   ├── index.d.ts
│   └── index.js
├── node_modules
├── jest.config.js
├── package-lock.json
├── package.json
├── src
│   └── index.ts
├── tests
│   └── index.test.ts
└── tsconfig.json

运行测试

1
npm run test

运行测试后，console会显示测试结果

同时会生成coverage目录，该目录下存有测试结果

jest官网