单元测试Reaction Redux thunk调度与JEST和"v:16.13.1"的Reaction测试库, [英] Unit testing react redux thunk dispatches with jest and react testing library for "v: 16.13.1",

查看:0
本文介绍了单元测试Reaction Redux thunk调度与JEST和"v:16.13.1"的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测试库,的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆