当前位置: 首页 > 知识库问答 >
问题:

单元测试react-redux thunk为“v:16.13.1”发送jest和react测试库,

高慈
2023-03-14

我有以下功能。

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;

共有1个答案

端木宏才
2023-03-14

经过几天的研究,我最终用以下方法测试了逻辑。

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);

 });
 类似资料:
  • 问题内容: 首先,我遵循Flux架构。 我有一个显示秒数的指示器,例如:30秒。每显示一秒,它就会少显示一秒钟,因此29、28、27直到0。当到达0时,我清除间隔,使其不再重复。而且,我触发一个动作。派遣此操作后,我的商店会通知我。因此,发生这种情况时,我将间隔重置为30秒,依此类推。组件看起来像: 组件工作正常。现在,我想用Jest测试它。我知道我可以使用renderIntoDocument,然

  • 问题内容: 我正在为我的React代码编写Jest测试,并希望使用/测试PropType检查。我对Javascript领域很陌生。我正在使用npm进行安装并有一个简单的方法: 在我的测试中。我的测试看起来很像玩笑/反应教程示例,其代码如下: 但是,似乎并未触发组件中的PropType检查。我知道检查仅在开发模式下运行,但是我还认为通过npm获得了开发版本。当我使用watchify构建组件时,检查会

  • 在了解上面的一些React基本概念过后,我们就可以来使用TDD的思想来进行我们开发了。 Create React App默认使用Jest进行测试,所以你需要先安装jest-cli,进入到client根目录: $ npm install jest-cli@20.0.4 --save-dev 注意版本 在安装的时候最好和我这里的版本保持一致,因为其他的版本可能会有其他问题,就需要自己去踩坑了哦~~~

  • 我试图在expo react native中使用jest对下面的代码进行单元测试,但它会产生未定义的错误。下面是函数 错误在导入中突出显示。我确实理解,世博会谷歌登录在世博会客户端应用程序上不起作用,而是在一个独立的应用程序上起作用。同样的事情也适用于单元测试吗?我们可以嘲笑谷歌签名吗?

  • 使用此答案中的代码解决单击组件外部的问题: 我不知道如何对不愉快的路径进行单元测试,以使警报不运行,目前为止我得到了什么: 我尝试过: 通过

  • 问题内容: 使用此答案中的代码来解决在组件外部单击的问题: 我不知道如何对不愉快的道路进行单元测试,以使警报不会运行,到目前为止,我得到了什么: 我试过了: 通过发送 节点并发送通过(不模拟) 荷兰国际集团在元件内部(不触发事件侦听器) 我确定我缺少一些小东西,但是我在任何地方都找不到这样的例子。 问题答案: import { mount } from ‘enzyme’ import React