（八）Jest测试的mock函数

2020-05-08 16:03:51 阅读：2468 来源： 互联网

标签：函数 mockCallback callback forEach 测试 fetchData Jest mock

一、为什么需要引入mock?

最常见的回调函数就是ajax请求，返回数据后执行成功或失败的回调。在Node 环境下，有一个npm 包request, 它可以发送异步请求，返回数据后调用回调函数进行处理，npm i request --save，安装一下，然后func.js 修改如下

const request = require('request');
function fetchData(callback) {
  request('https://jsonplaceholder.typicode.com/todos/1', function (error, response, body) {
    callback(body);
  });
}
module.exports = fetchData;

那怎么测试？肯定调用fetchData, 那就先要创建一个回调函数传给它，因为fetchData获取到数据后，会调用回调函数，那就可以在回调函数中创建一个断言，判断返回的数据是不是和期望的一样。func.test.js 文件修改为如下测试代码。

const fetchData = require('./fun');

test('should return data when fetchData request success', () => {
    function callback(data) {
        expect(data).toEqual({
            "userId": 1,
            "id": 1,
            "title": "delectus aut autem",
            "completed": false
        })
    }

    fetchData(callback);
})

执行npm run test 命令，看到pass，但其实并没有达到预期的效果，在callback 函数中加入console.log(data) 试一试，就知道了。测试文件改变后，jest 会重新跑一遍(开启了watch)，但并没有打印出data，也就是说callback 函数并没有被调用。这是为什么，我在这个地方想了好久，主要还是对异步了解的不够。当执行jest 测试的时候，实际上是node 执行test函数体的代码，首先看到callback的函数声明，它声明函数，然后看到fetchData() ，它就调用这个函数，请求https://jsonplaceholder.typicode.com/todos/1 接口，这个时候，getTodo函数就执行完了。你可能会想，回调函数都没有执行，这个函数怎么算执行完了呢？回调函数并不是代码执行的，而是放到node的异步队列中被执行的。此时我们就必须引入mock函数了。

二、Jest中的Mock Function

（1）、在jest 创建一个Mock 函数最简单的方法就是调用jest.fn() 方法。创建mock函数来捕获调用。具体实现如下：

demo.js文件代码：

export const forEach = (items, callback) =>{
	for (let index = 0; index < items.length; index++) {
		callback(items[index]);
	}
}

对应的测试用例代码：demo.test.js　　

import {forEach} from "./demo";
test('forEach',()=>{
	const mockCallback = jest.fn();
	forEach([0, 1], mockCallback);
	console.log('mockCallback',mockCallback.mock)//为此mock 函数还有一个mock 属性
	expect(mockCallback.mock.calls.length).toBe(2)
})

实现结果如下：

calls 保存的就是调用状态，results保存的就是返回值。invocationCallOrder数组表示函数调用顺序。instances表示当前的this

(2)、mockReturnValue 和 mockReturnValueOnce 设置函数的返回值。

import {forEach} from "./demo";
test('forEach',()=>{
	const mockCallback = jest.fn();
	mockCallback.mockReturnValueOnce('abs')
	forEach([0, 1], mockCallback);
	console.log('mockCallback',mockCallback.mock)
	expect(mockCallback.mock.calls.length).toBe(2)
})

运行结果如下：

mockReturnValueOnce 修改成 mockReturnValue之后发现返回的value值都变成abs。mock函数有mockReturnValue(),它的参数就是返回值。不过它不能返回promise. 可以使用mockResolvedValue直接返回promise的值. 对fetchData 进行mock， 然后设置它的mockResolvedValue()

（3）、toHaveBeenCalled(), toHaveBeenCalledTimes() ，使用起来有点方便了。你可能见过toBeCalled(), 其实，它和toHaveBeenCalled() 功能是一模一样的，使用哪个都行。使用起来非常方便。

import {forEach} from "./demo";
test('forEach',()=>{
 const mockCallback = jest.fn();
 mockCallback.mockReturnValueOnce('abs')
 forEach([0, 1], mockCallback);
 console.log('mockCallback',mockCallback.mock)
 //expect(mockCallback.mock.calls.length).toBe(2)
 expect(mockCallback).toHaveBeenCalled()
})

标签：函数,mockCallback,callback,forEach,测试,fetchData,Jest,mock
来源： https://www.cnblogs.com/xiaomg/p/12850988.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

（八）Jest测试的mock函数