Jest + React TestUtils:使用TestUtils.renderIntoDocument渲染<meta />标记

时间:2015-01-31 00:31:11

标签: reactjs jestjs reactjs-testutils

我正在编写一个React组件,它依赖于DOM的head区域中存在的特定名称的元标记,因此我尝试使用TestUtils.renderIntoDocument来创建用于运行我的Jest测试的元标记,这是行不通的。

jest.dontMock('../channel-finder');

describe('Channel Finder Component', function() {
  it('Renders properly with no props', function() {

    var React = require('react/addons');
    var ChannelFinder = require('../channel-finder');
    var TestUtils = React.addons.TestUtils;

    // Render into Document
    var ChannelFinderComponent = TestUtils.renderIntoDocument(
      <ChannelFinder />
    );
    var ClientIpMetaTag = TestUtils.renderIntoDocument(
      <meta name="client-ip" content="50.200.28.114">
    );

    // Find Rendered DOM Component
    var ChannelFinderDomElement = TestUtils.findRenderedDOMComponentWithTag(ChannelFinderComponent, 'div');

    // Assert Results
    expect(ChannelFinderDomElement.getDOMNode().textContent).toEqual('');
  });
});

这可以用React TestUtils或React本身来实现吗?

结果是超长错误堆栈跟踪: enter image description here

我的preprocessor.js文件:

// preprocessor.js
var ReactTools = require('react-tools');
module.exports = {
  process: function(src) {
    return ReactTools.transform(src);
  }
};

1 个答案:

答案 0 :(得分:0)

感谢您对此进行ping操作,因为它让我有动力再次访问它,而且事实证明这个神秘的错误消息不再说出它曾经说过的内容,而是说我的meta标签没有有效的JSX终止(DUH!),所以这就是它的工作原理:

var ClientIpMetaTag = TestUtils.renderIntoDocument(
    <meta name="client-ip" content="50.200.28.114" />
);

在右箭头之前添加斜杠使其成为有效的JSX。在我升级到React 0.13后,我看到了这个更有用的消息,这可能改进了错误消息(我猜)。