一、初始化项目

# 初始化项目
npm init

# 安装 jest
npm install jest@24.8.0 -D

# 初始化 jest 配置文件
npx jest --init

package.json

{
  ...
  "scripts": {
    // 运行这个命令执行 jest 测试
    "test": "jest"
  },
  ...
}

二、Jest 配置

我们可以通过 npx jest init 生成 jest 配置文件，或者右键新建一个 jest 配置文件

文件名为 jest.config.js 或 jest.config.json

部分配置如下，详情参考：www.jestjs.cn/docs/config…

key

value

备注

coverageDirectory

string

生成一个名为 coverage 的文件存放代码覆盖率

clearMocks

boolean

在每次测试之间自动清除模拟调用和实例

collectCoverage

boolean

是否应该在执行测试时收集覆盖率信息

coverageProvider

babel

1、使用 Babel

新建一个名为 babel.config.js 或者 babel.config.json

// 添加 babel 包
yarn add --dev babel-jest @babel/core @babel/preset-env

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

2、matcher 匹配器

这里罗列一些常用的匹配器

详情参考：www.jestjs.cn/docs/using-…

01、common

key

功能

备注

toBe

与值类型对比

toBe使用Object.is来测试完全相等

toEqual

与引用类型对比

递归检查引用类型

not

取反

test('common test', () => {
  const a = { x: 11 };
  expect(3 + 7).toBe(10) // 使用 Object.is 实现
  expect(a).toEqual({x: 11}); // toEqual 使用了循环递归进行比较
  expect(1).not.toBe(2) // 1 !== 2
});

02、Truthiness

key

功能

备注

toBeNull

是否为 null

toBeUndefined

是否为 undefined

toBeDefined

不为 undefined

toBeDefined 与 toBeUndefined 相反

toBeTruthy

是否 truthy

truthy 真：1、-1、true等

toBeFalsy

是否 falsy

falsy 假 : 0、null、undefined 等

test('Truthiness', () => {
  expect(null).toBeNull()
  expect(undefined).toBeUndefined()
  expect(1).toBeDefined()
  expect(-1).toBeDefined()
  expect(undefined).toBeDefined() // false
  expect(1).toBeTruthy()
  expect(0).toBeFalsy()
  
  // 还记得上面的 not 吗？😊
  expect(0).toBeFalsy() === expect(0).not.toBeTruthy()
})

03、Numbers

key

功能

备注

toBeGreaterThan

大于

toBeGreaterThanOrEqual

大于等于

toBeLessThan

小于

toBeLessThanOrEqual

小于等于

toBe，toEequal 也可以用来测试 number 类型

test('Numbers', () => {
  const count = 10;
  // count > expect
  expect(count).toBeGreaterThan(9);
  // expect(count).toBeGreaterThan(10);

  // count >= expect
  expect(count).toBeGreaterThanOrEqual(9);
  expect(count).toBeGreaterThanOrEqual(10);

  // count < expect
  expect(count).toBeLessThan(11);

  // count <= expect
  expect(count).toBeLessThanOrEqual(11);
  expect(count).toBeLessThanOrEqual(10);
})

04、Strings

key

功能

备注

toMatch

匹配

可以使用字符串也能使用正则

test('toMatch', () => {
  const str = 'http://www.baidu.com';

  expect(str).toMatch('baidu');
  expect(str).toMatch(/\.baidu\./);
})

05、Arrays and iterables

key

功能

备注

toContain

是否包含

// Array, Set
test('toContain', () => {
  const arr = ['1111', '3333', '555'];

  // set 也是可以的
  expect(arr).toContain('3333');
})

06、Exceptions

key

功能

备注

toThrow

测试错误

可以匹配抛出错误的信息

const throwNewErrorFunc = () => {
  throw new Error('this is a new error');
}

test('toThrow', () => {
  expect(throwNewErrorFunc).toThrow();
  expect(throwNewErrorFunc).toThrow('this is a new error');
})

3、Jest 指令

运行 npm run test 或者 yarn test ，等待 jest 执行后

我们可以通过 w 显示更多的指令

# watchAll 监听所有变化
jest --watchAll

# 监测改变文件的 jest
# o 模式
jest --watch

a 模式 -> 等同于 jest --watchAll，和 o 模式只能有一个存在
f 模式 -> 只监测之前没有通过的测试用例

# o 模式需要配合 git 一起使用，因为单凭 jest 是无法监测文件的变化的
o 模式 -> 监测改变文件的测试用例, 等同于 jest --watch

t 模式 -> 根据 【测试用例名称 | 正则表达式】 来运行对应的测试用例

q 模式 -> 退出对代码的监控

enter -> 再次执行一次测试，但是处于 o 模式，又没有改代码的话是不会执行的喔

p 模式 -> 监测文件名中包含输入字符串的文件

JEST - 基础知识