如何测试 Flux/React 中的操作？

Question

我正在尝试了解如何测试不断变化的操作。 provided example 的商店很简单，但 actions/data/api 层似乎没有任何东西。

在我的特定应用程序中，我需要在将某些内容发布到我的服务器之前对其进行预处理。根据 this post 中的建议，我决定在我的操作中实现异步内容。我想不通的是如何测试这个预处理。

例如 MissionActions.js:

addMissionFromBank: function(bankMission) {
    var mission = new Mission({game: GameStore.getGame().resource_uri, order: Constants.MISSION_ORDER_BASE_INT}).convertBankMission(bankMission);
    var order = MissionSort.calcOrderBySortMethod(mission, MissionStore.getMissions(), GameStore.getGame().sort_method);
    mission['order'] = order;

    AppDataController.addMissionFromBank(mission);
},

在此函数中，我将库存任务 (bankMission) 转换为常规任务，并使用正确的订单键将其保存到游戏中。然后我将这个新的常规任务发布到我的服务器，它的回调在我的 MissionStore 中处理。

由于这个转换代码很重要，我想为它编写一个测试但不知道如何去做，因为似乎只有测试商店和React组件的示例。有什么建议吗？

Answer 1

您可以 mock/spyOn AppDataController，并检查它是否接收到正确的任务对象。 jasmine里面是这样的，不知道是不是jest一样:

spyOn(AppDataController, 'addMissionFromBank');
MissionActions.addMissionFromBank(someBankMission);
expect(AppDataController.addMissionFromBank).toHaveBeenCalledWith(expectedMission);

Answer 2

您是在使用 flux dispatcher 还是需要 AppDataController？ Jest 将自动模拟您通过 browserify 的 require 引入的模块。如果您通过 require 导入 AppDataController，那么您的测试可能如下所示：

jest.dontMock('MissionAction.js') // or path/to/MissionAction.js
describe('#addMissionFromBank', function(){
  beforeEach(function(){
    MissionAction.addMissionFromBank(exampleMission);
  });

  it('calls AppDataController.addMissionFromBank', function(){
    expect(AppDataController.addMissionFromBank).toBeCalled());
  });
});

您想调用您正在测试的非模拟方法并检查是否调用了模拟。检查它是否被调用使用

#toBeCalled()

或者，如果您想检查它是否使用特定值调用（例如，检查它是否使用评估的任何任务调用）使用

#toBeCalledWith(value)

如何测试 Flux/React 中的操作？

How to test actions in Flux/React?

reactjs

reactjs-flux

flux

jestjs