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'

})