如何编写测试用例处理Axios请求错误？

组件示例（参考） #

假设你的组件结构如下，在componentDidMount中调用getUser并在catch分支设置错误state：

import React, { Component } from 'react';
import { getUser } from './api';

class GithubUser extends Component {
  state = {
    error: ''
  };

  async componentDidMount() {
    try {
      const user = await getUser('target-username');
      // 成功时的处理逻辑（此处省略）
    } catch (err) {
      this.setState({ error: 'request error' });
    }
  }

  render() {
    const { error } = this.state;
    return (
      <div className="user-container">
        {error && <p className="error-message">{error}</p>}
        {/* 其他渲染内容 */}
      </div>
    );
  }
}

export default GithubUser;

Jest测试用例实现 #

以下测试用例会mock掉getUser方法，模拟请求失败场景，验证错误提示是否正确显示：

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import GithubUser from './GithubUser';
import { getUser } from './api';

// Mock 整个api模块的getUser方法
jest.mock('./api', () => ({
  getUser: jest.fn()
}));

describe('GithubUser 组件错误处理', () => {
  it('当getUser请求失败时，显示"request error"提示', async () => {
    // 让mock的getUser返回一个被拒绝的Promise，模拟请求失败
    getUser.mockRejectedValueOnce(new Error('GitHub API 请求失败'));

    // 渲染组件
    render(<GithubUser />);

    // 等待组件异步更新state并渲染错误文本
    await waitFor(() => {
      // 断言错误文本存在于DOM中
      expect(screen.getByText('request error')).toBeInTheDocument();
    });

    // 可选：验证getUser是否被正确调用（比如参数是否符合预期）
    expect(getUser).toHaveBeenCalledTimes(1);
    expect(getUser).toHaveBeenCalledWith('target-username');
  });
});

关键说明 #

• Mock请求方法：通过jest.mock替换真实的getUser，避免发起实际网络请求，确保测试的独立性。
• 模拟失败场景：使用mockRejectedValueOnce让mock方法返回被拒绝的Promise，触发组件的catch分支。
• 异步断言：因为componentDidMount是异步执行的，需要用waitFor等待组件更新state并完成渲染，再进行断言。
• 额外验证：可以添加对getUser调用次数、参数的断言，确保请求逻辑符合预期。

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