Jest模拟含Promise方法的可构造API类时出现方法未定义错误

1. 组件中API导入方式错误 #

你的API类是默认导出（export default class API），但组件里使用了命名导入：

import { API } from './API'; // 错误：默认导出不能用命名导入

这会导致API变量为undefined，后续创建实例时会引发异常。应该改为默认导入：

import API from './API'; // 正确：匹配默认导出

2. 模拟的getSomeData未返回Promise #

原getSomeData是async函数，返回的是Promise，组件中调用了.then()方法。但你当前模拟的getSomeData直接返回普通数组：

getSomeData: () => { return [] } // 错误：数组不是thenable对象

这会导致组件调用.then()时报错，因为数组没有then方法。需要改为返回resolved状态的Promise：

getSomeData: () => Promise.resolve([]) // 正确：返回符合async函数类型的Promise

3. 优化后的完整测试代码 #

修改后的Jest模拟代码如下：

import "@testing-library/jest-dom";
import { render, waitFor } from "@testing-library/react";
import SomeComponent from './SomeComponent'
import API from './API';

jest.mock('./API', () => {
  return jest.fn().mockImplementation(() => {
    return {
      getSomeData: jest.fn(() => Promise.resolve([])) // 返回Promise并添加jest mock追踪调用
    }
  })
});

describe('SomeComponent', () => {
  beforeEach(() => {
    // 每次测试前清除mock调用记录，避免测试间污染
    API.mockClear();
  });

  it('初始化时调用getSomeData并更新状态', async () => {
    render(<SomeComponent />);
    
    // 验证API类被实例化
    expect(API).toHaveBeenCalledTimes(1);
    
    // 获取mock实例，验证getSomeData的调用参数
    const apiInstance = API.mock.instances[0];
    expect(apiInstance.getSomeData).toHaveBeenCalledWith({ some_param: 'some_param_value' });
    
    // 等待异步状态更新完成后执行断言（如果需要验证DOM渲染结果）
    await waitFor(() => {
      // 示例：expect(screen.getByText('目标文本')).toBeInTheDocument();
    });
  })
})

额外提示 #

• 用API.mockClear()在测试前清除调用记录，避免不同测试用例的状态互相干扰。
• 处理异步操作时，使用waitFor或findBy*系列查询方法，确保状态更新完成后再执行断言。

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