如何对异步 Redux 操作进行单元测试以模拟 ajax 响应

2022-01-11 00:00:00 reactjs jasmine javascript redux

我正在创建一个中间件，用于使用异步操作发出 ajax 请求.中间件拦截原始动作，执行 ajax 请求，并将原始动作与来自 url 的响应一起重新dispatch.

I am creating a middleware for making ajax requests using async actions. The middleware intercepts original action, performs ajax request, and re-dispatches the original action along with the response from the url.

所以，我的组件只会dispatch这样的动作

So, my Component would merely dispatch an action like this

onClick() {
    dispatch(ActionCreator.fetchUser());
}

其余部分将由中间件处理，如下所示这里.

Rest will be taken care by the middleware as shown here.

我的问题是，我应该为单元测试做什么?我应该模拟 onClick 本身吗?或者我应该编写一个模拟中间件并使用模拟响应转发操作?

My question is, what should I do for unit testing? Should I mock the onClick itself? or I should write a mocked middleware and forward the actions with the mocked response?

我不确定我应该采用哪种方法.我尝试了几种方法，但我尝试的所有方法都没有任何意义.

I am not sure which approach should I take. I tried several stuff, but none of what I tried made sense to me.

任何指针?

推荐答案

注意:下面的回答有些过时了.

这里描述了一种更简单的更新方法.
不过，您仍然可以使用其他方式.

Note: answer below is slightly outdated.

A much simpler updated approach is described here.
You can still do it the other way too, though.

我们现在有 一个关于测试异步操作创建者的部分 在官方文档中.

We now have a section on testing async action creators in the official docs.

对于使用 Redux Thunk 或其他中间件的异步操作创建者，最好完全模拟用于测试的 Redux 存储.您仍然可以将 applyMiddleware() 与模拟商店一起使用，如下所示.您还可以使用 nock 来模拟 HTTP 请求.

For async action creators using Redux Thunk or other middleware, it’s best to completely mock the Redux store for tests. You can still use applyMiddleware() with a mock store, as shown below. You can also use nock to mock the HTTP requests.

function fetchTodosRequest() {
  return {
    type: ADD_TODOS_REQUEST
  };
}

function fetchTodosSuccess(body) {
  return {
    type: ADD_TODOS_SUCCESS,
    body
  };
}

function fetchTodosFailure(ex) {
  return {
    type: ADD_TODOS_FAILURE,
    ex
  };
}

export function fetchTodos(data) {
  return dispatch => {
    dispatch(fetchTodosRequest());
    return fetch('http://example.com/todos')
      .then(res => res.json())
      .then(json => dispatch(addTodosSuccess(json.body)))
      .catch(ex => dispatch(addTodosFailure(ex)));
  };
}

可以像这样测试:

import expect from 'expect';
import { applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import * as actions from '../../actions/counter';
import * as types from '../../constants/ActionTypes';
import nock from 'nock';

const middlewares = [thunk];

/**
 * Creates a mock of Redux store with middleware.
 */
function mockStore(getState, expectedActions, onLastAction) {
  if (!Array.isArray(expectedActions)) {
    throw new Error('expectedActions should be an array of expected actions.');
  }
  if (typeof onLastAction !== 'undefined' && typeof onLastAction !== 'function') {
    throw new Error('onLastAction should either be undefined or function.');
  }

  function mockStoreWithoutMiddleware() {
    return {
      getState() {
        return typeof getState === 'function' ?
          getState() :
          getState;
      },

      dispatch(action) {
        const expectedAction = expectedActions.shift();
        expect(action).toEqual(expectedAction);
        if (onLastAction && !expectedActions.length) {
          onLastAction();
        }
        return action;
      }
    }
  }

  const mockStoreWithMiddleware = applyMiddleware(
    ...middlewares
  )(mockStoreWithoutMiddleware);

  return mockStoreWithMiddleware();
}

describe('async actions', () => {
  afterEach(() => {
    nock.cleanAll();
  });

  it('creates FETCH_TODO_SUCCESS when fetching todos has been done', (done) => {
    nock('http://example.com/')
      .get('/todos')
      .reply(200, { todos: ['do something'] });

    const expectedActions = [
      { type: types.FETCH_TODO_REQUEST },
      { type: types.FETCH_TODO_SUCCESS, body: { todos: ['do something']  } }
    ]
    const store = mockStore({ todos: [] }, expectedActions, done);
    store.dispatch(actions.fetchTodos());
  });
});

相关文章