时间戳

首页 > 解决方案 > 我怎样才能开玩笑地测试这个 redux 操作？

javascript - 我怎样才能开玩笑地测试这个 redux 操作？

问题描述

我想测试这个使用 axios 的 redux 操作，我已经成功测试了成功路径，但是我无法到达 catch 块来完成代码覆盖。我开玩笑地使用模拟文件夹来模拟 axios 。

export const fetchTasks = () => dispatch => {
    dispatch(fetchLoading());
    axios
        .get(url + '/all', { mode: 'cors' })
        .then(response => {
            dispatch(setTasks(response.data));
            dispatch(fetchDone());
        })
        .catch(response => {
            console.log(response);
            dispatch(fetchDone());
        });
};

这是我的成功路径测试，它实现了一个 redux 存储并期望加载和 setTasks 运行，并且 setTasks 操作具有与我的 mockObjects 任务列表匹配的有效负载。

describe('when fetchTasks is dispatched', () => {
    it('should dispatch other actions with correct payloads', async () => {
        const store = testStore();
        const spyOnDispatch = jest.spyOn(store, 'dispatch');
        await tasksActions.fetchTasks()(store.dispatch, store.getState);
        expect(spyOnDispatch).toHaveBeenCalledWith({ type: 'FETCH_LOADING' });
        expect(spyOnDispatch).toHaveBeenCalledWith({ type: 'SET_TASKS', tasks: mockObjects.mockTasks });
        expect(spyOnDispatch).toHaveBeenCalledWith({ type: 'FETCH_DONE' });
        expect(store.getState().tasksState.tasks).toEqual(mockObjects.mockTasks);
    });
});

我尝试使用此代码使 catch 代码运行，但它执行与成功路径相同的代码并将任务列表设置为未定义

 mockAxios.get.mockImplementationOnce(() => Promise.reject({ status: 400 }));

标签： javascriptunit-testingreduxjestjsaxios

解决方案

在测试发出 HTTP 请求的前端代码时，我建议使用模拟库来创建虚假响应。我熟悉的两个是nock和fetch-mock。您应该能够在模拟响应代码中引发错误，以便触发catch()分支。

推荐阅读