javascript - 使用 Jasmine 使用异步 api 测试 Flux 存储

Question

我正在尝试使用 Flux 存储测试一些非常简单的功能，这些功能在对发出 http 请求并返回 Promise 的服务的特定事件调用时，存储如下所示:

case UserActions.FETCH_USER_BY_ID:
   const userService = new UserService();
   userService.fetchUserById(action.id)
      then(user => {
        this.user = user;
        this.emit(USER_FETCH_COMPLETED);
      });

对于测试，我使用 Jasmine，我的测试用例如下所示:

it('should fetch user by id', () => {
  const userStore = require('../stores/userStore');
  const mockUser = {name: 'test', id: 123};
  spyOn(UserService.prototype, 'fetchUserById')
    .and.returnValue(Promise.resolve(mockUser));
  dispatchEvent();
  expect(userStore.user).toEqual(mockUser);
})

正如预期的那样，由于 Promise 的异步行为，此测试失败，我理解这里的问题，但我找不到解决方案如何说测试等待 Promise 来自 userService 已解决。

Answer 1

我不建议在商店内使用异步调用。它可能会导致商店的状态不可预测。也许你可能会遇到这个错误:Flux Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch .

相反，一旦用户获取，您的 userService 应该使用用户数据来handleAction。然后您的商店应该更新用户数据。

例如，

用户服务:

userService.fetchUserById = function(userId) {
  apiCall(userId).then(user => handleAction(UserActions.FETCH_USER_BY_ID, user));
}

用户存储:

   case UserActions.FETCH_USER_BY_ID:
     this.user = payload.data;
     this.emit(USER_FETCH_COMPLETED);
     break;

这是一篇关于使用 API 和 Flux 获取数据的好短文: https://medium.com/@tribou/flux-getting-data-from-an-api-b73b6478c015#.vei6eq5gt

然后，您可以为您的商店和服务单独编写测试:

商店测试:

it('should fetch user by id', () => {
  const userStore = require('../stores/userStore');
  const mockUser = {name: 'test', id: 123};
  handleAction(UserActions.FETCH_USER_BY_ID, mockUser) 
  expect(userStore.user).toEqual(mockUser);
})

服务测试:

it('should fetch user by id', (done) => {
  const userService = require('../service/userService');
  // userService.fetchUserById(userId);
  // here you can add spyOn http service that you are using in the service
  // and mock the response from that service
  // and then validate that `handleAction` has been triggered
})