Unit testing react redux thunk dispatches with jest and react testing library for quot;v: 16.13.1quot;,(单元测试Reaction Redux thunk调度与JEST和quot;v:16.13.1quot;的Reaction测试库,)
问题描述
我有以下功能。
const loadUsers= () => {
return async (dispatch) => {
dispatch(userRequest());
let response= null
try {
response= await UserService.getUser();
dispatch(userLoading());
} catch (error) {
dispatch(userError(error));
} finally {
dispatch(userSuccess(response));
}
};
};
通过以下单元测试,我能够访问";Dispatch(userRequest());
describe('user thunk', () => {
it('dispatches a userRequest', async () => {
const dispatch = jest.fn();
await loadUsers()(dispatch);
expect(dispatch).toHaveBeenCalledWith(userRequest());
});
});
但是,我不知道如何测试response= await UserService.getUser();及以下的行。尽管该函数并不复杂,并且我对编写复杂的测试没有太大的价值,但我需要它来构建我的管道。
如有任何帮助,将不胜感激。
提前谢谢。
更新-&>用户服务
import axios from 'axios';
const USERS_ENDPOINT = '/user';
export const getUser= async () => {
const response = await axios.get(PRODUCTS_ENDPOINT, {});
return response.data;
};
export default getUser;
推荐答案
经过几天的研究,我最终用以下方法测试了逻辑。
import thunk from 'redux-thunk';
import configureStore from 'redux-mock-store';
import * as reactRedux from 'react-redux';
import axios from 'axios';
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
describe('load user thunk', () => {
it('dispatches load user and error on call when API is not mocked', async () => {
const store = mockStore({});
const requestDispatch= userRequest();
const errorDispatch= userError("Mock Message");
await store.dispatch(await loadUsers());
const actionsResulted = store.getActions();
const expectedActions = [
requestDispatch,
errorDispatch,
];
expect(actionsResulted.length).toEqual(expectedActions.length);
expect(actionsResulted[0].type).toEqual(expectedActions[0].type);
expect(actionsResulted[1].type).toEqual(expectedActions[1].type);
});
it('dispatches load user and success on call when API is mocked', async () => {
const store = mockStore({});
const requestDispatch= userRequest();
const successDispatch= userSuccess("Mock Data");
jest
.spyOn(axios, 'get')
.mockResolvedValue({ status: 200, data: "Mock Data"});
await store.dispatch(await loadUsers());
const actionsResulted = store.getActions();
const expectedActions = [
requestDispatch,
successDispatch,
];
expect(actionsResulted.length).toEqual(expectedActions.length);
expect(actionsResulted[0].type).toEqual(expectedActions[0].type);
expect(actionsResulted[1].type).toEqual(expectedActions[1].type);
});
这篇关于单元测试Reaction Redux thunk调度与JEST和";v:16.13.1";的Reaction测试库,的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:单元测试Reaction Redux thunk调度与JEST和";v:
基础教程推荐
- 即使每次插入第一个输入的值不同,第二个输入仍显示相同的输入值 2022-01-01
- 在 Javascript 中使用 Fetch API 上传文件并显示进度 2022-01-01
- 使用 jQuery 在悬停时交换 DIV 类 2022-01-01
- 最佳动态 JavaScript/JQuery 网格 2022-01-01
- 带角度的选项卡:仅使用 $http 在单击时加载选项卡 2022-01-01
- 从快速中间件中排除路由 2022-01-01
- 当木偶师打开Chrome时,不能使用Chrome扩展 2022-01-01
- HTML5 画布调整为父级 2022-01-01
- CORS:当凭据标志为真时,无法在 Access-Control-Allow-Origin 中使用通配符 2022-01-01
- 逻辑运算符 ||在 javascript 中,0 代表 Boolean false? 2022-01-01
