背景

在网络请求中，我们习惯了模拟返回正确的数据，而忽略他的catch情况。因为一般情况下并不会太大的影响覆盖率，但是当测试页面本身代码量少或者catch中有太多的未执行代码，那么也会因此大大降低覆盖率。此时我们便需要模拟网络请求的错误情况。

两种网络请求方法

• react-query
• axios

react-query如何通过jest模拟错误情况

我们会有一个react-query相关的方法

export const useSubmitData = (): UseMutationResult<
  any[], //返回值类型
  AxiosError<any>, // 返回错误值类型 其中any可以具体到错误类型的每一个值
  any // 参数传入值类型
> => {
return useMutation<any[],AxiosError<any>,any>(
  submitData2
)}

然后我们只需要对其返回的mutate多加一个onError即可

jest.mock('src/query/home/home');
import {useSubmitData} from 'src/query/home/home';
const mockSubmit = useSubmitData as jest.MockedFunction<typeof useSubmitData>;
mockSubmit.mockImplementation(
  () => {
    return {
      mutate: jest.fn((_,{onSuccess,onError}) => {
        onSuccess({
          code: 200
        })
        onError({
          code: '501'
        })
      })
    } as unknown as any
  }
)

这种好处是，不需要写两种情况，直接写在一起，react-query会自动分配

axios如何通过jest模拟错误情况

同样，我们会有一个相关的方法

export const getUserData = async () => {
  const path = commonUrl + '/home/user';
  const res = await axios.get(path);
  return res.data;
}

然后我们在mock的时候得写两份，因此我们会有两个test/it，写法大概如下面

import * as api from "src/api/detail";

test('calls updateUsername with the new username', async () => {
  const mockGetData2 = jest.spyOn(api,'getUserData')
  mockGetData2.mockImplementation(
    () => {
      return Promise.resolve({
        id: '999', 
        name: 'mike'
      })
    }
  )
  
  ...其他测试内容
  await act(async () => {
    expect(mockGetData2).toBeCalled();
  })
})

test('catch in axios', async () => {
  const mockGetData = jest.spyOn(api,'getUserData')
  mockGetData.mockImplementation(
    () => {
      return Promise.reject({
        id: '999', 
        name: 'mike'
      })
    }
  )
  ...其他测试内容
  await act(async () => {
    expect(mockGetData).toBeCalled();
  })
})

以上便是axios和react-query使用jest测试覆盖catch的情况