Jest Mocks入门

一、介绍

• Mocks可以捕获对函数的调用（以下用法一）
  • 使用mock function，可以查看函数的调用次数，以及入参情况
• Mocks可以擦除函数的实际实现来测试代码之间的链接（以下用法二）
  • manual_mocks用来mock依赖的模块，放置在相应__mocks__的目录下
    
    

二、用法

（一）Mock Function

• 主要使用let mockFunc = jest.fn()来模拟function(),可测试调用的次数和传入的参数

function forEach(items,callback) {
  for(let index = 0;index{
  // mockFunc模拟函数
  let mockFunc = jest.fn()

  forEach([1,2,3],mockFunc)
  // 调用了多少次
  expect(mockFunc.mock.calls.length).toBe(3)
   // 参数
  expect(mockFunc.mock.calls[0]).toEqual([1])
  expect(mockFunc.mock.calls[0][0]).toBe(1)
})

• 使用npx jest测试执行，结果为passed
  
  

（二）manual_mock

• 用于手动模拟测试模块，覆盖模块依赖。如无法调用Ajax、jQuery进行测试的情况下，自己手动写一个有相同逻辑的"Ajax"、"jQuery"进行模块覆盖，以此达到正常测试的目的

• 用法：应在相应的目录下新建__mock__文件夹，并在文件夹里新建manual_mock.js

  • 若模拟本地模块，则在同目录下新建__mock__文件夹，并在文件夹里新建manual_mock.js
  • 若模拟node_modules文件夹里的模块，则在node_modules文件夹相应目录（一般是根目录）下新建__mock__文件夹，并在文件夹里新建manual_mock.js。例如本文章新建一个jquery.js为例。

• /__mock__/jquery.js

module.exports = (selector) => document.querySelector(selector)

• /test/mocks.js

jest.mock('jquery')
const $ = require('jquery')

test('jquery',()=>{
  document.body.innerHTML = '
jquery
'
  expect($('#jquery').innerHTML).toBe('jquery')
})

• 使用npx jest测试执行，结果为passed