Antd登录表单提交API调用测试失败：TypeError问题求助

核心问题 #

报错TypeError: Cannot read properties of undefined (reading 'login')是因为service.authService未被正确Mock，导致调用login时它是undefined；同时测试代码存在两处细节错误：组件传参不匹配、方法名拼写错误。

具体修复步骤 #

1. 正确Mock Service模块 #

jest.mock("../service")默认生成空Mock对象，需要手动定义authService和login的Mock结构，确保它们存在且是可调用的Mock函数。

根据你的Service模块导出方式选择对应写法：

情况1：Service是默认导出对象

如果../service是默认导出：

// service.js示例
export default {
  authService: {
    login: async (username, password) => { /* 真实逻辑 */ }
  }
}

修改测试文件的Mock部分：

jest.mock("../service", () => ({
  default: {
    authService: {
      login: jest.fn().mockResolvedValue({ /* 模拟登录成功返回的数据 */ })
    }
  }
}));

import service from "../service";

情况2：Service是具名导出authService

如果../service是具名导出：

// service.js示例
export const authService = {
  login: async (username, password) => { /* 真实逻辑 */ }
}

修改测试文件的Mock部分：

jest.mock("../service", () => ({
  authService: {
    login: jest.fn().mockResolvedValue({ /* 模拟登录成功返回的数据 */ })
  }
}));

import { authService } from "../service";

2. 修复组件传参错误 #

LoginForm组件接收的是onFinish属性，但测试里renderLoginForm传递的是onFinishMock，导致组件仍调用原有onFinish函数而非Mock。修改renderLoginForm：

const renderLoginForm = (onFinishMock) => {
  act(() => {
    render(
      <Provider store={store}>
        <LoginForm onFinish={onFinishMock} />
      </Provider>
    );
  });
};

3. 修复方法名拼写错误 #

测试代码里expect(service.authServices)多了一个s，修正为authService，同时要检查是否是调用login方法：

// 原错误代码
expect(service.authServices).toHaveBeenCalledWith(username, password);

// 修改后
expect(service.authService.login).toHaveBeenCalledWith(username, password);
// 若为具名导出，使用expect(authService.login)...

4. 优化测试逻辑（可选） #

• 移除不必要的jest.useFakeTimers()，waitForElement建议替换为waitFor，避免fake timers引发的异步问题。
• 用afterEach统一清理Mock：

const checkCanSubmitLogin = async () => {
  const expectedText = `Welcome ${correctUsername}`;
  login(correctUsername, correctPassword);

  await waitFor(() => {
    expect(screen.getByText(expectedText)).toBeInTheDocument();
  });
};

afterEach(() => {
  jest.clearAllMocks();
});

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