背景
在网络请求中，我们习惯了模拟返回正确的数据，而忽略他的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的情况
