Jest测试React组件报错TypeError: (0 , _user.default) is not a function排查

错误原因 #

1. Jest 模拟的模块导出结构和实际不符
   你在user.js中使用的是默认导出getUserInfo函数，但是你写的jest.mock返回了一个包含getUserInfo属性的普通对象，这会导致模块的默认导出变成这个普通对象，而非你预期的函数。你在组件中导入的getUserInfo实际拿到的是这个对象，调用时自然会报「不是函数」的错误。

2. user.js本身存在语法错误
   你当前的导出写法export default const getUserInfo = async () => {}不符合ES规范，默认导出不能直接跟随变量声明，需要调整为合法的导出写法：

// 修正后的user.js
const getUserInfo = async () => {
  return fetch('/getInfo', {});
};
export default getUserInfo;

修复方案 #

修改App.test.jsx中的jest.mock写法，明确指定ES模块的默认导出为模拟函数：

jest.mock('../src/services/user', () => ({
  __esModule: true,
  default: () => Promise.resolve(
    {
      "Authorization": {
        "FName": "Test Name",
        "LName": "Test Last Name"
      }
    }
  )
}))

添加__esModule: true是为了标识这是一个ES模块，default字段对应的就是默认导出的内容，修改后组件中导入的getUserInfo就会是你定义的模拟函数，报错即可解决。

额外优化建议 #

由于你组件中的逻辑是异步执行的，直接调用render后测试直接结束可能会触发未处理的异步警告，建议调整测试用例等待异步逻辑执行完成：

import { render, screen } from '@testing-library/react';

// ...其余代码不变

it('renders correctly after async request', async () => {
  render(<App />);
  // 验证加载状态
  expect(screen.getByText('Loading!')).toBeInTheDocument();
  // 等待异步请求完成、页面更新
  expect(await screen.findByText('Finished Loading!')).toBeInTheDocument();
})

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