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个expect return 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
捕获函数的调用和返回结果，以及this和调用顺序
它可以让我们自由的设置返回结果
改变函数的内部实现
1、回调函数测试
// 待测试代码 const runCallback = (callback) => { callback() } // 测试代码 test("测试 runCallback", () => { const func = jest.fn(); // mock函数，捕获函数的调用 func.mockReturnValueOnce('a'); // 设置第一次返回a func.mockReturnValueOnce('b'); // 设置第二次返回b func.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']) // 回调函数的参数是abc expect(func.mock.results[0].value).toBe('abc') // 判断返回是不是abc expect(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 跳过该快照提示
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理
