如何在 Flux/React 中测试动作?

Posted

技术标签:

【中文标题】如何在 Flux/React 中测试动作?【英文标题】:How to test actions in Flux/React? 【发布时间】:2015-06-28 16:30:08 【问题描述】:

我正在尝试弄清楚如何测试不断变化的动作。使用provided example,商店很简单,但似乎没有动作/数据/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 组件的示例。有什么建议吗?

【问题讨论】:

【参考方案1】:

您是在使用通量调度程序还是需要 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) 

【讨论】:

expect(module).toBeCalledWith(correctMission) 是我想要的。谢谢!【参考方案2】:

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

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

【讨论】:

感谢您的建议,在 Jest 中还没有遇到类似 spyOn 的东西,但我会去看看。

以上是关于如何在 Flux/React 中测试动作?的主要内容,如果未能解决你的问题,请参考以下文章

如何使 reactjs/flux/react-router spa 同构?

如何在 Flux / ReactJS 中处理多个相同类型的商店?

在 Flux/React.js 中,在哪里初始化 jQuery 插件?

在 Flux/React 中调度级联/依赖异步请求

Flux+React.js - 缓存 API 请求响应

React 和 Flux:“在调度中间调度”以显示来自 API 调用的错误消息