如何使用Jest测试连接存储的React视图?

时间:2014-12-05 19:53:17

标签: reactjs react-jsx reactjs-flux jestjs reactjs-testutils

我有一个与商店通信的反应视图。我已经成功地单独测试了视图和商店,但没有合并。

我关注了structure documented here,但收到了 TypeError 。即使我使用dontMock,看起来Jest也试图将商店注册为组件。

Using Jest CLI v0.2.0
 PASS  __tests__/unit/spec/stores/ViewStore-spec.js (0.248s)
 FAIL  __tests__/unit/spec/components/View-spec.react.js (0.942s)
undefined
● View › it defaults to zero unread
  - TypeError: /Users/matnorri/dev/projects/matnorri/web-client/src/app/scripts/components/View.react.js: /Users/matnorri/dev/projects/matnorri/web-client/src/app/scripts/stores/ViewStore.js: Cannot call method 'register' of undefined
        at /Users/matnorri/dev/projects/matnorri/web-client/src/app/scripts/stores/ViewStore.js:43:31
        at Object.runContentWithLocalBindings (/Users/matnorri/dev/projects/matnorri/web-client/node_modules/jest-cli/src/lib/utils.js:357:17)
        ...

我已经包含了我认为是下面的相关代码,但如果有必要,可以完整地提供它。

查看Jest测试

jest.dontMock('../../../../src/app/scripts/components/View.react');
jest.dontMock('../../../../src/app/scripts/stores/ViewStore');

describe('View', function() {

  var React;
  var TestUtils;
  var ViewComponent;
  var View;

  beforeEach(function() {
    React = require('react/addons');
    TestUtils = React.addons.TestUtils;
    ViewComponent =
      // Tried both lines with same effect.
      // require('../../../../src/app/scripts/components/View.react.js');
      require('../../../../src/app/scripts/components/View.react');
    View = TestUtils.renderIntoDocument(<ViewComponent />);
  });

  it('defaults to zero unread', function() {
    View._toString = jest.genMockFunction();
    View._onChange();
    expect(View.state.unread).toBe(0);
  });
});

谢谢!

1 个答案:

答案 0 :(得分:4)

回答您的问题

我也遇到了这个问题而没有嘲笑object-assign为我解决了这个问题。将jest.dontMock('object-assign');添加到您的spec文件中。这将解决问题。

// View Jest test
jest.dontMock('../../../../src/app/scripts/components/View.react');
jest.dontMock('../../../../src/app/scripts/stores/ViewStore');

嘲笑或不嘲笑

有关何时嘲笑或不嘲笑的更多信息&#34;可以在Jest documentation website找到。

Jest修改&#34;要求&#34;的默认行为。方法并实现它自己的require方法。这样他们就可以模拟文件中的每个函数。因此,如果你想要一些真正有用的东西(比如商店),你就不应该嘲笑这个文件。

在您的情况下,您不会嘲笑ViewStore,因此将调用此商店中的每个功能。因为你没有模仿object-assign,所以对象分配功能不起作用。这样ViewStore没有以正确的方式创建(它返回undefined)并且测试会因为Cannot call method 'register' of undefined函数不起作用而引发错误assign,因为它被嘲笑了。

再次;如果您仔细阅读Jest网站上的文档,您将找到有关何时嘲笑或不嘲笑&#34;的详细说明。


额外信息

我建议添加&#34; object-assign&#34;和其他常用模块(如lodash /下划线)到测试配置中的unmockedModulePathPatterns。有关此内容的更多信息:https://facebook.github.io/jest/docs/api.html#config-unmockedmodulepathpatterns-array-string