Jest mock - 如何在 ES 模塊內的鈎子內監視 function 內的 function？

Question

我有這個要模擬的模塊：

import { createContext, useContext } from 'react'

const SomeContext = createContext({
  set: () => null,
  reset: () => null,
})

export const useSomeContext = () => useContext(SomeContext)

...這是它在自定義反應鈎子中的使用方式：

import { useSomeContext } from './someContext'

export const useCustomHook = () => {
  const { reset, set } = useSomeContext()
  useEffect(() => {
    set()
    return reset
  }, [reset, set])
  ...
}

我正在嘗試測試在useCustomHook組件呈現時是否調用了 function set 。 這是我編寫這樣一個測試的嘗試：

import * as useSomeContextModule from '../someContext'
import { useCustomHook } from '../useCustomHook'

const mockReset = jest.fn()
const mockSet = jest.fn()

jest.mock('../someContext', () => {
  const originalModule = jest.requireActual('../someContext')
  return {
    __esModule: true,
    ...originalModule,
    useSomeContext: jest.fn(() => ({
      reset: mockReset,
      set: mockSet,
    })),
  }
})

test('set method is called when useCustomHook renders', () => {
  useCustomHook()
  expect(mockSet).toHaveBeenCalled()
})

但是，我得到這個錯誤：

TypeError：無法解構“（0，_index.useSomeContext）（...）”的屬性“重置”，因為它未定義。

   7 |
   8 | export const useCustomHook = () => {
>  9 |   const { reset, set } = useSomeContext()

Answer 1

而不是使用jest.mock我使用jest.spyOn ：

import * as useSomeContextModule from '../someContext'
import { useCustomHook } from '../useCustomHook'
import { renderHook, cleanup } from '@testing-library/react-hooks'

const mockReset = jest.fn()
const mockSet = jest.fn()

beforeEach(() => {
    jest.spyOn(useSomeContextModule, 'useSomeContext').mockReturnValue({
      reset: mockReset,
      set: mockSet,
    })
  })

test('set method is called when useCustomHook renders', () => {
  renderHook(() => useCustomHook())
  expect(mockSet).toHaveBeenCalledOnce()
})

test('reset method is called when useCustomHook unmounts', async () => {
  renderHook(() => useCustomHook())
  await cleanup()
  expect(mockReset).toHaveBeenCalledOnce()
})