jest测试具体方法

一、基本语法（匹配器matchers）

1.基础语法

test('two plus two is four', () => {expect(2 + 2).toBe(4);
});

expect()返回被称作“expectation”的对象。toBe()被称作matcher。Jest会对两者进行比较并输出测试结果。

相应的，expect()和toBe()还可以调用被测的function

test('two plus two is four', () => {const add = 2+2;const value =4;expect(add).toBe(value);
});
12345

还可以用not.toBe():

expect(add).not.toBe(value);

2.比较null,undefined,true,false

 expect(n).toBeNull(); // 比较是否为nullexpect(n).toBeDefined(); // 比较是否为definedexpect(n).not.toBeUndefined(); // 比较是否为undefinedexpect(n).not.toBeTruthy(); // 比较是否为trueexpect(n).toBeFalsy(); // 比较是否为false

3.比较number

 expect(value).toBe(4); expect(value).toEqual(4);expect(value).toBeGreaterThan(11); // value比较是否大于11expect(value).toBeLessThan(11); // value比较是否小于11expect(value).toBeGreaterThanOrEqual(11); // value比较是否大于等于11expect(value).toBeLessThanOrEqual(11); // value比较是否小于等于11expect(0.1 + 0.2).toBeCloseTo(0.3); // 浮点数比较

对于number，toBe()和toEqual()两者在大部分时候都是等价的

4.比较string

使用toMatch()方法

test('there is no I in team', () => {expect('team').not.toMatch(/I/); // 是否不包含I字符串（可以直接写字符串）
});test('but there is a "stop" in Christoph', () => {expect('Christoph').toMatch(/stop/); // 是否包含stop字符串（可以直接写字符串）
});

5.比较Arrays，Set

使用toContain()方法

const shoppingList = ['diapers','kleenex','trash bags','paper towels','beer',
];test('the shopping list', () => {expect(shoppingList).toContain('beer'); // 数组中包含beerexpect(shoppingList).not.toContain('pork'); // 数组中不包含pork
});

6.匹配引用类型

test('引用类型', () => {const a = {one: 1};expect(a).toEqual({one: 1});
});

7.异常

const throwNewErrorFunc = () => {throw new Error('this is a new error')
}test('toThrow', () => {expect(throwNewErrorFunc).toThrow() // 是否抛出异常expect(throwNewErrorFunc).toThrow('this is a new error') // 是否抛出异常并且异常为'this is a new error'expect(throwNewErrorFunc).not.toThrow() // 是否不抛出异常
})

8.更多expect用法

请查询Jest官方文档，链接官方文档

二、测试覆盖率

1.生成测试覆盖率

// Jest 运行
npx jest --coverage

// umi 运行
run test --coverage

会在项目根目录生成coverage文件夹可以查看生成的测试用例覆盖率。

热重载测试用例

命令

npm run jest --watchAll

A模式当有测试用例改变时会自动重新执行所有测试用例

npm run jest --watch

默认为o模式。o 模式只会执行更改测试用例的文件

f模式只会对之前没有通过的测试用例测试。

t模式根据测试用例的名字匹配，只会执行匹配到的测试用例。（可以只写名字的部分可以过滤到）

p模式根据测试文件名匹配，只会执行匹配到的测试文件中的测试用例。

q退出测试监控。

Enter重新执行测试用例。

三、异步测试（例如接口测试）

done函数只有调用done函数时才测试结束

// 回调类型异步测试
test('请求结果为{ success: true }', (done) => {fetchData((data) => { // fetchData 为axios 请求expect(data).toEqual({success: true})done();})
})// promise类型异步测试1
test('请求结果为{ success: true }', () => {return fetchData((data).then((response) => { expect(response.data).toEqual({success: true}) })
})// promise类型异步测试2
test('请求结果为{ success: true }', () => {return expect(fetchData()).resolves.toMatchObject({data: {success: true}})
})// promise类型异步测试3
test('请求结果为{ success: true }', async () => {await expect(fetchData()).resolves.toMatchObject({data: {success: true}})
})// promise类型异步测试4
test('请求结果为{ success: true }', async () => {const response = await fetchData();expoect(response.data).toEqual({success: true})
}) // 返回404测试test('请求结果为404', () => {expect.assertions(1); // 下面必须执行1个expect 为了解决catch 成功时不会执行，参数2代表必须执行2个expectreturn fetchData((data).catch((e) => { expect(e.toString().indexOf('404') > -1).toBe(true) })}) // 返回404测试 test('请求结果为404', () => {return expect(fetchData()).rejects.toThrow();})// 返回404测试 test('请求结果为404', async () => {await expect(fetchData()).rejects.toThrow();}) // 返回404测试 test('请求结果为404', async () => {expect.assertions(1);try {await fetchData();} catch(e) {expect(e.toString()).toEqual("Error: Request failed with status code");}})

四、钩子函数

beforeAll

所有测试用例调用之前

afterAll

所有测试用例调用之后

beforeEach

每个测试用例执行之前

afterEach

每个测试用例调用之后

describe

describe("测试分组", () => {// 这里可以写多个test也可以嵌套 beforeAll afterAll beforeEach afterEach 可以理解为作用域....
})

test.only

会忽略其他测试代码，只执行.only的测试

五、jest Mock

1.捕获函数的调用和返回结果，以及this和调用顺序2.它可以让我们自由的设置返回结果3.改变函数的内部实现### 1、回调函数测试

 // 待测试代码
const runCallback = (callback) => {callback()
} // 测试代码
test("测试 runCallback", () => {const func = jest.fn(); // mock函数，捕获函数的调用func.mockReturnValueOnce('a'); // 设置第一次返回afunc.mockReturnValueOnce('b'); // 设置第二次返回bfunc.mockReturnValueOnce('c'); // 设置第二次返回c(可以链式调用)func.mockImplementationOnce(() => { // 设置返回值还可以做其他操作return 'abc'})func.mockReturnValue('abc'); // 设置所有的调用返回值为abc   runCallback(func);runCallback(func);expoect(func).toBeCalled() // 回调函数是否被调用expect(func.mock.calls.length).toBe(2) // 回调函数是否执行了2次expect(func.mock.calls[0]).toEqual(['abc']) // 回调函数的参数是abcexpect(func.mock.results[0].value).toBe('abc') // 判断返回是不是abcexpect(func).toBeCalledWith('abc') // 每次返回都是abc
})

2、请求测试

请求测试的返回结果应该是后端自动化测试内容，所以可以使用jest mock模拟axios 请求不发送真实请求。

import axios from 'axios';
jest.mock('axios');test("测试 请求", async () => {// 改变函数的内部实现axios.get.mockResolvedValue({data: 'hello'})axios.get.mockResolvedValueOnce({data: 'hello'})axios.get.mockResolvedValueOnce({data: 'world'})await getData().then((data) => {expoect(data).toBe('hello')})await getData().then((data) => {expoect(data).toBe('world')})
})

发送请求也可以单独定义使用jest.mock

jest.mock("./demo"); // 模拟的请求直接写一个promise
jest.unmock("./demo"); // 取消mock模拟
import { fetchData } from './demo'; // 真实的发送请求
const { getNunber } = jest.requireActual('./demo'); // 在自动匹配mock文件时该方法可以直接使用原文件中的方法test('fetchData 测试', () => {return fetchData().then(data => {expect(eval(data)).toEqual('123')})
})

如果开启了自动mock会自动匹配到当前目录下__mocks__文件下的同名文件会自动替换为mock文件。

六、snapshot 快照测试

一般用来测试配置文件

const generateConfig = () => {return {server: 'http://localhost',port: 8080,domain: 'localhost',time: '2019'}
}test("测试 配置文件", () => {expect(generateConfig()).toMatchSnapshot();
})// 假如 generateConfig 的time 为 new Date() 动态变化的test("测试 配置文件", () => {expect(generateConfig()).toMatchSnapshot({time: expect.any(Date) // 可以为string /number 等});
})test("测试 配置文件", () => {expect(generateConfig()).toMatchInlineSnapshot({ time: expect.any(Date) // 可以为string /number 等   }, `会在这里直接生成快照`);
})

u 更新快照

i 逐个确认按u后逐个更新

s 跳过该快照提示

七、定时器测试

jest.useFakeTimers(); // 下面的定时器使用jestmock的beforeeach(() => {jest.useFakeTimers(); // 这样调用可以解决多个定时器测试问题
})test('timer 测试', (done) => {const fn = jest.fn();  timer(fn);  jest.runAllTimers(); // 马上执行不需要等定时器（所有的都执行）   jest.runOnlyPendingTimers(); // 只执行队列中的一个（用来解决多个定时器嵌套）    jest.advanceTimersByTime(3000); // 快进3s执行 快进时间  expect(fn).toHaveBeenCalledTimes(1) // 是否调用一次回调函数
})

八、类的测试

import Util from './util';const util = null;beforeAll(() => {utiil = new Util();
})test('测试 a 方法', () => {expoect(util.a(1,2)).toBe('12');
})

jset.mock('./util', () => {const Until = jest.fn(() => {console.log('constructor')});Until.prototype.a = jest.fn(() => {console.log(a)})Until.prototype.b = jest.fn(() => {console.log(b)})return Until;
};
import Util from './util';
import demoFunction from './demo';test('测试 demoFunction 方法', () => {demoFunction();expoect(util).toHaveBeenCalled();expoect(util.mock.instances[0].a).toHaveBeenCalled(); // 是否调用了util 类中的a方法expoect(util.mock.instances[0].b).toHaveBeenCalled(); // 是否调用了util 类中的b方法
})

九、dom节点操作

jest 自己模拟了dom 的api

import addDivToBody from './demo';
import $ from 'jquery';test("测试 addDivToBody", () => {addDivToBody();addDivToBody();expect($('body').find('div').length).toBe(2);
})