使用Jest模拟Axios Post请求时触发TypeError错误的原因是什么？

错误信息 #

TypeError: Cannot read properties of undefined (reading '1')

核心原因 #

这个错误本质是你模拟的axios.post函数未被触发调用，导致mockFn.mock.calls[0]返回undefined，后续读取apiCall[1]时触发属性读取错误。具体诱因分为以下几点：

1. 异步点击未等待 #

userEvent.click（@testing-library/user-event v14+版本）是异步操作，但你的测试代码没有用await等待点击完成就直接检查mock调用。此时submit回调还未执行，axios.post自然没有被调用，mock.calls为空数组。

2. 按钮可能处于禁用状态 #

组件按钮带有disabled={isSubmit}属性，如果isSubmit初始值为true，按钮会被禁用。而screen.queryByRole默认不会返回禁用元素（includeDisabled默认为false），此时你拿到的button可能是null，点击无效导致submit函数未执行。

3. Axios模拟方式存在隐患 #

直接给axios.post赋值jest.fn()的方式，在ES模块导入场景下可能不生效——组件导入的axios实例和测试中修改的可能不是同一个引用。

修复方案 #

1. 等待异步点击完成 #

给userEvent.click添加await，确保点击回调执行完毕后再检查mock：

await userEvent.click(button);

2. 确保按钮可被查询并点击 #

• 检查组件中isSubmit的初始值，确保按钮默认处于启用状态；
• 若需要查询禁用按钮，显式设置includeDisabled: true：

const button = screen.queryByRole("button", { 
  name: "Sign Up", 
  includeDisabled: true 
}) as HTMLElement;

3. 正确全局模拟Axios #

使用Jest的jest.mock全局模拟axios，确保组件和测试使用同一模拟实例：

// 测试文件顶部
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

// 测试用例内
mockedAxios.post.mockImplementation(jest.fn());
await userEvent.click(button);

const apiCall = mockedAxios.post.mock.calls[0];
const body = apiCall[1];
expect(body).toEqual({ userName: "arif", password: "one", email: "xyz@abc.com" });

4. 修正表单字段映射 #

注意到HTML输入的name属性与期望的请求体字段不匹配：

• 邮箱输入name为userEmail，密码为userPassword，但你期望请求体是email和password。需要调整handleChange函数，确保输入值正确映射到formData的对应字段，否则后续断言会失败。

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