Typescript配置Jest测试框架

配置测试环境

直接下载已配置文件

https://download.youkuaiyun.com/download/qq_41906031/34930441

创建 package.json文件

npm init -y

装置运行环境

安装 typescript

npm install --save-dev typescript

安装 jest

npm install --save-dev jest

安装 jest 说明文件

npm install --save-dev @types/jest
// 此处没有加jest版本号

修改 package.json 文件

{
  "scripts": {
    "test": "jest"
  }
}

生成 jest.config.js 配置文件

初始化 jest.confit.js 文件

npx jest --init

后面会让你操作一些配置项：

• Would you like to use Jest when running"test" script in “pageage.json”? 当在 “package.json” 中运行 “test” 时你是否使用 Jest ？
  y
• Would you liek to use Typescript for the configuraton file? 你想在配置文件中使用Typescript吗?
  y
• Choose the test environment that will be used for testing >> node/jsdom (browser-like) 选择要使用的测试环境
  选择 jsdom (browser-like)
• Do you want Jest to add coverage reports? 你想添加 Jest 代码覆盖率报告吗？
  y
• Which provider should be used to instrument code for coverage? v8/bable 应该使用哪个提供商来检测覆盖范围的代码?
  选择 babel
• Automatically clear mock calls and instances between every test? 是否自动清除每个测试之间的模拟调用和实例?
  y

配置后将会生成一个 jest.config.js 和 jest.config.ts文件，jest.config.ts 文件可以删除

使用 Babel

安装 babel 依赖

npm install --save-dev babel-jest @babel/core @babel/preset-env

在工程根目录创建 babel.config.js 文件，用于配置你的当前Node版本兼容的Babel：

// babel.config.js
module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

使用 Typescript

Jest可以通过 Babel 支持 Typescript，安装 @babel/preset-typescript

npm install --save-dev @babel/preset-typescript

你需要添加@babel/preset-typescript的预设到babel.config.js.

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

搭建项目文件

初始化 ts

自动生成 tsconfig.json 文件

tsc --init

修改项目编译目录，修改 tsconfig.json 文件

"rootDir": "./src",
"outDir": "./build", 

创建文件夹 : ./src 和 ./build

创建测试文件

• ./src/sum.ts

// sum.ts
export function sum(a: number, b: number) {
  return a + b;
}

• ./src/sum.test.ts

// sum.test.ts
import { sum } from "./sum";

describe("开始执行测试集合", () => {

  beforeAll(() => {
    console.log("用例集合前置");
  });
  
  afterAll(() => {
    console.log("用例集合执行结束");
  })
  
  beforeEach(() => {
    console.log('1111111111');
  });
  
  afterEach(() => {
    console.log('22222222222');
  });
  
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
  
  test('adds 2 + 2 to equal 4', () => {
    expect(sum(2, 2)).toBe(4);
  });

});

构建项目和运行测试

构建项目 使用快捷键 Ctrl + Shift + B

运行测试

npm run test

运行结果：

 PASS  build/sum.test.js
  ● Console

    console.log
      用例集合前置

      at build/sum.test.js:6:17

    console.log
      1111111111

      at Object.<anonymous> (build/sum.test.js:12:17)

    console.log
      22222222222

      at Object.<anonymous> (build/sum.test.js:15:17)

    console.log
      1111111111

      at Object.<anonymous> (build/sum.test.js:12:17)

    console.log
      22222222222

      at Object.<anonymous> (build/sum.test.js:15:17)

    console.log
      用例集合执行结束

      at build/sum.test.js:9:17

 PASS  src/sum.test.ts
  ● Console

    console.log
      用例集合前置

      at src/sum.test.ts:6:13

    console.log
      1111111111

      at Object.<anonymous> (src/sum.test.ts:14:13)

    console.log
      22222222222

      at Object.<anonymous> (src/sum.test.ts:18:13)

    console.log
      1111111111

      at Object.<anonymous> (src/sum.test.ts:14:13)

    console.log
      22222222222

      at Object.<anonymous> (src/sum.test.ts:18:13)

    console.log
      用例集合执行结束

      at src/sum.test.ts:10:13

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                  
 build    |     100 |      100 |     100 |     100 |                  
  sum.js  |     100 |      100 |     100 |     100 |                  
 src      |     100 |      100 |     100 |     100 |                  
  sum.ts  |     100 |      100 |     100 |     100 |                  
----------|---------|----------|---------|---------|-------------------

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        3.51 s
Ran all test suites.

项目目录说明

项目目录

package.js 文件

//package.json
{
  "name": "TestJest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-typescript": "^7.15.0",
    "@types/jest": "^27.0.2",
    "babel-jest": "^27.3.0",
    "jest": "^27.3.0"
  }
}