如何使用 redux-axios-middleware 测试 Redux 异步操作

Posted

技术标签:

【中文标题】如何使用 redux-axios-middleware 测试 Redux 异步操作【英文标题】:How to test Redux async action with redux-axios-middleware 【发布时间】:2019-10-31 20:30:16 【问题描述】:

我的 Redux 存储配置了 redux-thunk 和 redux-axios-middleware,用于使用 axios HTTP 客户端获取数据。

我有一个在开发中完美运行的操作,但我无法开玩笑地对其进行测试。这是行动:

export const subscribeTrial = trialingDuration => dispatch => 
  const message = `You're now Premium✨ for $trialingDuration days!`;

  return dispatch(
    type: SUBSCRIBE_TRIAL,
    payload: 
      request: 
        method: 'post',
        url: '/subscriptions/trial',
      ,
    ,
  ).then(( type ) => 
    if (type === SUBSCRIBE_TRIAL_SUCCESS) 
      dispatch(
        showHeadMessage(message,  type: 'info', discardTimeout: 5000 ),
      );
    
  );
;

这是我当前失败的测试:

import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const mockStore = configureStore([thunk]);
const store = mockStore();

beforeEach(() => 
  store.clearActions();
);

it('can start trial', () => 
  const expectedAction = 
    type: SUBSCRIBE_TRIAL,
    payload: 
      request: 
        method: 'post',
        url: '/subscriptions/trial',
      ,
    ,
  ;

  store.dispatch(subscribeTrial());

  expect(store.getActions()).toEqual([expectedAction]);
);

Jest 一直指向 .then() 并引发以下错误:

TypeError: dispatch(...).then is not a function

我做错了什么?想不通。

【问题讨论】:

你在哪里/如何使用 axios? 我使用 redux-axios-middleware 与 axios HTTP 客户端获取数据 您需要将实际执行请求的中间件添加到模拟存储。或者您可以创建一个以某种方式伪造这种行为的中间件。否则 dispatch 调用的结果是 POJO 而不是 Promise。 @YuryTarabanko 谢谢你,这是解决方案,我在 lib 的问题中找到了解决方法 【参考方案1】:

基于@YuryTarabanko 的评论:

将实际执行请求的中间件添加到模拟存储中

我通过将我的 axios 客户端和中间件添加到商店来修复测试:

import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import  multiClientMiddleware  from 'redux-axios-middleware';

import axiosClients from '../../services/http_clients';

const middlewares = [thunk, multiClientMiddleware(axiosClients)];
const mockStore = configureStore(middlewares);

it('can start trial', () => 
  const store = mockStore(
    user:  email: 'user@example.com', authenticationToken: '123456' ,
  );

  const expectedAction = 
    type: SUBSCRIBE_TRIAL,
    payload: 
      request: 
        method: 'post',
        url: '/subscriptions/trial',
      ,
    ,
  ;

  store.dispatch(subscribeTrial());
  expect(store.getActions()).toEqual([expectedAction]);
);

【讨论】:

以上是关于如何使用 redux-axios-middleware 测试 Redux 异步操作的主要内容,如果未能解决你的问题,请参考以下文章

如何使用本机反应创建登录以及如何验证会话

如何在自动布局中使用约束标识符以及如何使用标识符更改约束? [迅速]

如何使用 AngularJS 的 ng-model 创建一个数组以及如何使用 jquery 提交?

如何使用laravel保存所有行数据每个行名或相等

如何使用 Math.Net 连接矩阵。如何使用 Math.Net 调用特定的行或列?

WSARecv 如何使用 lpOverlapped?如何手动发出事件信号?