使用Jest仅为单个测试用例mock React组件时报错如何修复

报错原因 #

你调用jest.requireActual('./Test')返回的是整个模块的导出对象，由于Test组件是用export default导出的，真实组件实际挂载在返回对象的.default属性上，你直接把整个模块对象传给mockImplementation，而它需要接收可执行的函数作为入参，自然会抛出specificMockImpl.apply is not a function的错误。

修复方案 #

仅修改beforeEach里的mockImplementation入参，取到真实组件的default导出即可，修复后的测试文件代码如下：

import { render } from '@testing-library/react';
import App from './App';
import Test from './Test';

jest.mock('./Test');

beforeEach(() => {
  // 取default属性拿到真实的组件函数
  Test.mockImplementation(jest.requireActual('./Test').default)
})

test('should render test component', () => {
  const { getByText} = render(<App />);
  expect(getByText('Test')).toBeInTheDocument()
})

test('should render with mocked test component', () => {
  Test.mockImplementation(() => <div>TEST VALUE</div>)
  const { getByText} = render(<App />);
  expect(getByText('TEST VALUE')).toBeInTheDocument()
})

补充说明 #

• 如果你用的是ES模块命名导出而非默认导出，不需要加.default，直接取对应导出的属性名即可
• 该写法可以保证每次测试前都重置为真实组件实现，仅在需要mock的测试用例里单独覆写实现，完全符合你的需求

内容的提问来源于stack exchange，提问作者LuckyStrike