jest+testing-library/react 单元测试 react+antd 的实践(二)

阅读本编文章请先看 jest+testing-library/react 单元测试 react+antd 的实践(一) 获取安装以及基本语法知识，下面讲从真实业务场景 antd+react 来写单元测试的例子

axios 测试

前端业务一般发请求用的是axios，会对axios进行包装，用请求拦截器 和 response拦截器 对请求和返回进行封装，场景是请求添加header: Authorization: Bearer token 返回根据返回结果进行判断采取不同的措施，例如登陆过期就跳登出，接口报错就弹窗错误消息，代码如下：

const createAxiosInstance = (): AxiosInstance => {
   
  const instance = axios.create({
   
    validateStatus: () => true, // 不管返回的 http 状态码是多少，都不抛出错误，在响应拦截器中进行处理
  });

  // 请求拦截器
  instance.interceptors.request.use((config) => {
   
    config.headers = {
   
      ...config.headers,
      Authorization: `Bearer ${
     auth.getToken()}`,
    };
    return config;
  });

  // 响应拦截器
  instance.interceptors.response.use((res: AxiosResponse<Res>) => {
   
    const data = res.data;

    // 登陆失效，并跳转到登录页面
    if (res.status === 401) {
   
      message.error('登录状态已失效，请重新登录');
      setTimeout(()