Jest中的mock

Jest中mock的作用：

• mock函數，捕獲函數的調用 和 返回結果 以及 this指向 和 調用順序.
• 可以讓我們自由的設置返回結果.
• 改變內部函數的實現.

業務代碼：

import axios from 'axios'

export const runCallback = (callback) => {
	callback()
}

export const getData = () => {
  return axios.get('/api').then(res => res.data)
}

1.捕獲函數的調用 和 返回結果 以及 this指向 和 調用順序

測試代碼：

import { runCallback, getData } from './demo'

test.only('測試 runCallback', () => {
  const func = jest.fn() //1. mock函數，捕獲函數的調用 和 返回結果 以及 this指向 和 調用順序
  // 改變this指向
  // func.mockImplementation(() => {
  //   return this
  // })

  func.mockReturnThis() // 等價於上邊的mockImplementation

  runCallback(func) 
  runCallback(func)
  runCallback(func)
  expect(func.mock.calls.length).toBe(3) // 斷言：斷定什麼樣的內容會有什麼樣的結果
  // expect(func).toBeCalled() // 匹配函數func是否被執行
  console.log(func.mock)
})

• jest.fn() 可捕獲函數的調用 和 返回結果 以及 this指向 和 調用順序.

2.可以讓我們自由的設置返回結果

import { runCallback, getData } from './demo'

test.only('測試 runCallback', () => {
  const func = jest.fn() 
  // 2.可以讓我們自由的設置返回結果
  func.mockReturnValueOnce('riona-cheng') // 函數執行第一次時，模擬返回結果爲'riona-cheng'
  func.mockReturnValueOnce('aaa') // 函數執行第二次時，模擬返回結果爲'aaa'
  func.mockReturnValueOnce('bbb') // 函數執行第三次時，模擬返回結果爲'bbb'

  runCallback(func) 
  runCallback(func)
  runCallback(func)
  expect(func.mock.calls.length).toBe(3) // 斷言：斷定什麼樣的內容會有什麼樣的結果
  // expect(func.mock.results[0].value).toBeUndefined()
  // expect(func).toBeCalled() // 匹配函數func是否被執行
  console.log(func.mock)
})

測試結果：返回值爲我們分別設置的值

3.改變內部函數的實現

mock測試異步axios請求:

import { runCallback, getData } from './demo'
import axios from 'axios'
jest.mock('axios') // 讓jest對axios做一個模擬

/** 
 * 
 { calls: [ [], [] ], // 被調用了多少次 以及 傳入參數
      instances: [ undefined, undefined ], // 每次func運行時，this的指向
      invocationCallOrder: [ 1, 2 ], // 執行順序
      results: // 每次函數執行的返回結果
       [ { type: 'return', value: undefined },
         { type: 'return', value: undefined } ] }
 *  */ 

// 對前端測試，只需要測試請求發送了即可，至於具體返回什麼，是後端負責測試的
// 3.改變函數的內部實現，之前是異步發請求，現在是同步的模擬數據
test('測試 getData', async () => {
  // axios.get.mockResolvedValue({data: 'hello'})
  // await getData().then(res => {
  //   expect(res).toBe('hello')
  // })

  // 模擬多次請求返回不同結果
  axios.get.mockResolvedValueOnce({data: 'hello'})
  axios.get.mockResolvedValueOnce({data: 'world'})
  await getData().then(res => {
    expect(res).toBe('hello')
  })

  await getData().then(res => {
    expect(res).toBe('world')
  })
})

• jest.mock(‘axios’) 讓jest對axios做一個模擬. 在測試用例中即可用同步代碼模擬數據，不需要發送真實的請求。

知識補充

• test.only : 只執行當前的測試用例代碼.
• expect().toBe() 這種語句被稱爲斷言：斷定什麼樣的內容會有什麼樣的結果.
• mock函數的mock屬性：

/** 
 { calls: [ [], [] ], // 被調用了多少次 以及 傳入參數
      instances: [ undefined, undefined ], // 每次func運行時，this的指向
      invocationCallOrder: [ 1, 2 ], // 執行順序
      results: // 每次函數執行的返回結果
       [ { type: 'return', value: undefined },
         { type: 'return', value: undefined } ] }
 **/