jest初始化 && typescript && babel && ts-jest

2,364 阅读1分钟

介绍jest最简单的使用方式,如果项目使用typescript需要做什么额外的配置;本文提供了两种方式第一种是babel方式,第二种是通过安装配置ts-jest的方式

1.初始化一个jest测试项目

1. 初始化项目安装jest

npm init
npm install --save-dev jest

2. 创建测试文件

创建sum.js文件,创建测试文件sum.test.js

function sum(a, b) {
  return a + b;
}
module.exports = sum;
const sum = require('../sum');
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

3. 在package.json中添加配置

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

4. 运行npm run test

✓ adds 1 + 2 to equal 3 (4ms)
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.312s
Ran all test suites.

会寻找项目目录下匹配**/__tests__/**/*.[jt]s?(x), **/?(*.)+(spec|test).[tj]s?(x)规则的文件,作为测试用例文件

2.通过babel方式使用typescript

1. 创建babel配置文件

根目录创建babel.config.js

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

2. 添加配置

安装@babel/preset-typescript, 在babel.config.js中添加配置

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

3. 测试 创建add.ts文件

function sum(a, b):Number {
  return a + b;
}
module.exports = sum;
const sum = require('../add');
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

3.通过ts-jest方式使用typescript

1. 安装相关依赖

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

2. 生成jest.config.js文件

npx ts-jest config:init
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

3. 测试

注释掉babel.config.js文件中的内容,npm run test 进行测试

function sum(a, b):Number {
  return a + b;
}
module.exports = sum;
const sum = require('../add');
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

4.github代码地址

https://github.com/cnlinge/jest-js-ts-start