React Jest异步Axios调用Mock报错：Cannot read properties of undefined

问题根源 #

你的业务代码中是通过直接调用axios函数的方式发起请求：

const result = await axios({method: "get", url: '<url hidden for stack overflow>'});

但测试代码里只Mock了axios.get方法，两者调用方式不匹配，导致Mock未生效，axios返回undefined，进而访问result.data时抛出类型错误。

解决方案（二选一即可） #

方案1：调整测试代码，Mock axios默认函数

修改测试中的Mock逻辑，针对axios直接调用的情况进行Mock：

describe("Get JWT Token Mock with Button Click", () => {
     test("Get JWT Token Mock with Button Click", async () => {
        const { getByText } = renderComponent();

        // Mock axios默认导出的函数，而非axios.get方法
        mockedAxios.mockImplementationOnce(() =>
          Promise.resolve({
            data: "JWT token"
          })
        );
    
        fireEvent.click(getByText('Get JWT Token'));
        // 用waitFor等待异步操作完成，避免测试不稳定
        await waitFor(() => {
          // 可添加断言（比如验证setCookie调用逻辑，需提前Mock setCookie）
        });
       });
});  

方案2：调整业务代码，使用axios.get简化调用

把业务代码中的请求方式改为axios.get，和测试中的Mock逻辑对齐：

async function getJWTToken() {
    // 改用axios.get方法发起请求
    const result = await axios.get('<url hidden for stack overflow>');
    setCookie('jwttoken', result.data, { path: '/' });
}

这种方式下，你原有的测试代码无需修改即可正常工作。

额外提示 #

测试异步操作时，建议用waitFor包裹断言逻辑，确保异步请求和后续操作完成后再执行断言，避免测试出现不稳定的情况。

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