jest mock ajax,07|Jest中的Mock

jest中mock函数的作用

1、捕获函数的调用和返回结果，以及this和调用顺序

2、他可以让我们自由的设置返回结果

3、改变函数的内部实现(测试接口)

一、基础的测试示例

export const runCallback = (callback) => {

return callback();

}

import { runCallback } from './demo'

test('测试 runCallback', () => {

const func = () => {

return 'abc'

}

expect(runCallback(func)).toBe('abc')

})

二、使用jest.fn

export const runCallback = (callback) => {

callback('abc');

}

import { runCallback } from './demo'

test('测试 runCallback', () => {

const func = jest.fn()

runCallback(func)

expect(func).toBeCalled()

console.log(func.mock)

})

test('测试 runCallback', () => {

const func = jest.fn()

// const func = jest.fn(() => {

// return '456'

// })

// func.mockReturnValueOnce('Dell'); //2 他可以让我们自由设置返回结果

// func.mockReturnValue('Dell');

runCallback(func)

runCallback(func)

//expect(func.mock.calls.length).toBe(2)

expect(func.mock.calls[0]).toEqual(['abc'])

console.log(func.mock)

})

image.png

三、fn.mock.instances

export const createObject = (classItem) => {

new classItem()

}

import { createObject } from './demo'

test.only('测试createObject', () => {

const func = jest.fn(); // 1、捕获函数的调用和返回结果以及this和调用顺序

createObject(func);

console.log(func.mock)

})

image.png

四、改变函数的内部实现

import axios from 'axios'

export const getData = () => {

return axios.get('/api').then(res => res.data)

}

import axios from 'axios'

jest.mock('axios')

test.only('测试getData', async() => {

axios.get.mockResolvedValue({data:'hello'})

await getData().then((data) => {

expect(data).toBe('hello')

})

})

五、几种相似的结果

const func = jest.fn()

func.mockImplementation(() => {

console.log('123123');

return 'dell'

})

const func = jest.fn(() => {

console.log('123123');

return 'dell'

})