問題描述

我正在創建一個中間件，用于使用異步操作發出 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());
  });
});

這篇關于如何對異步 Redux 操作進行單元測試以模擬 ajax 響應的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！