测试自定义的redux中间件，该中间件处理ajax请求

Question

我正在使用自定义redux中间件构建react-redux应用程序。 在我的项目的定义中，操作仅提供一个对象来定义操作类型以及中间件和reducer的必要参数。 所有的ajax请求都将由中间件处理。 这是生命周期的样子：操作->中间件（如果操作被拦截）-> reducer->存储

当用户尝试登录时，对react组件的操作将触发一个操作，如下所示：

export function login(username, password) {
  return {
    type: 'LOGIN',
    username: username,
    password: password
  }
}

export function authSucceed(username, isAdmin) {
  return {
    type: 'AUTHSUCCEED',
    username: username,
    isAdmin: isAdmin
  }
}

export function authFail(text) {
  return {
    type: 'AUTHFAIL',
    errorMessage: text
  }
}

然后中间件将使用在操作中传递的参数来发送ajax请求，就像这样。

export function customedMiddleware(store) {
  return next => action => {
    if (action.type === 'LOGIN') {
      axios.post(url + '/api/login', {
        username: action.username,
        password: action.password
      })
        .then(res => {
          if (res.status === 200) {
            store.dispatch(actions.authSucceed(res.data.username, res.data.isAdmin));
          } else {
            store.dispatch(actions.authFail(res.data));
          }
        })
        .catch(error => console.log(error));
      }
      return next(action);
    };
  }

中间件向服务器发送登录请求后，根据身份验证是否成功，中间件将在reducer中相应地调度一些动作。 由于authSucceed和authFail不会被中间件截获，reduce将相应地进行处理。

export default function(state = false, action) {
  switch(action.type) {
    case 'AUTHSUCCEED': 
      return true;
    case 'AUTHFAIL': 
        return false;
    case 'LOGOUT': 
        return false;
  }
  return state;
}

在reducer中已完成的操作是更改系统状态。 如果状态为true，则前端将渲染信息页面。 如果状态为false，则前端将保留在登录页面中。

我喜欢这种方式的系统定义。 每个MVC部件都隔离良好。 但是，测试中间件非常困难。 目前，我正在以这种方式进行测试：

it('should dispatch authSucceed if signup with correct info', () => {
  nock('http://localhost:8080')
    .post('/api/signup', {
      username: 'bruce',
      password: 'Gx1234'
    })
    .reply(200, {
      username: 'bruce',
      isAdmin: false
    });

  const createStoreWithMiddleware = applyMiddleware(customedMiddleware)(createStore);
  const store = createStoreWithMiddleware(reducers);
  const dispatch = sinon.spy(store, 'dispatch');

  store.dispatch(actions.login('bruce', 'Gx1234'));
  setTimeout(() => {
    expect(dispatch.calledWith({
      type: 'AUTHSUCCEED',
      username: 'bruce',
      isAdmin: false
    })).to.be.true;
  }, 100);
});

我调度登录操作。 然后监视在100毫秒内是否可以正确调用authSucceed操作和authFail操作。 如果仅要运行一个测试，则此方法有效。 如果有多个测试依次进行，则它们可能会相互影响。 我必须调整setTimeout的时间延迟以使其适用于所有情况，即10ms。 这样我不舒服。 由于绝对时间与硬件有关，因此我无法确定它对我还是对每个人都有效。 如果有人可以给我一些有关如何测试此自定义中间件的建议，我将不胜感激。

Answer 1

您的代码可以正常工作，但是您不需要这么长时间的setTimeout ，因为使用nock可以立即进行远程请求响应。 问题是诺言使微 任务排队，并且它们仅在宏任务完成后运行（在您的情况下为it() ），并且在同一事件循环中运行。

这就是为什么需要setTimeout来排队另一个宏任务的原因，时间没有区别。 我相信setImmediate应该工作。