React 组件的 Jest 测试失败答案

【问题标题】：Jest test failure with React componentReact 组件的 Jest 测试失败
【发布时间】：2016-06-08 17:41:00
【问题描述】：

我正在尝试测试一个反应组件，这里是测试

jest.dontMock('../js/components/Navigation.js');
var React = require('react/addons');
var Navigation = require('../js/components/Navigation.js');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;
TestUtils = React.addons.TestUtils;

describe('Navigation', function() {

 var NavElement = TestUtils.renderIntoDocument(
    <Navigation items={['nav1', 'nav2', 'nav3']} />
  );

  var items = TestUtils.scryRenderedDOMComponentsWithTag(NavElement, 'li');


  it('renders each item as a li', function() {
    expect(items.length).toEqual(3);


  });


});

这是组件

var React = require('react');
var Router = require('react-router').Router;
var Link = require('react-router').Link;
var RouteHandler = require('react-router').RouteHandler;    

var Navigation = React.createClass({
    render: function() {
        return (
            <div>
            <header>
            <ul>
            <li><Link to="nav1">nav1</Link></li>
            <li><Link to="nav2">nav2</Link></li>
            <li><Link to="nav3">nav3</Link></li>
            </ul>
            </header>
            <RouteHandler />
            </div>
            );
        }
    });

当我运行“npm test”时，我收到以下警告和错误警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。

  - Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

我错过了什么？

我尝试删除和重新安装节点模块也尝试导入为

var Navigation = require('../js/components/Navigation.js').default;

并使用

modules.export = Navigation;

【问题讨论】：

标签： reactjs browserify jestjs

【解决方案1】：

你的组件有

module.exports = App;

部分？

看起来你可能没有正确导入它

您还需要在组件文件中导入 Link 和 RouteHandler 组件，就在您导入 React 的位置。

【讨论】：

添加后仍然出现同样的错误。为了澄清起见，我将其添加到文件末尾
好的，现在只要确保你像这样包含它：var Navigation = require('../js/components/Navigation.js');
Navigation组件的render方法报错
您还需要在组件文件中导入 Link 和 RouteHandler 组件，就在您导入 React 的位置。更新了我的答案。
路由处理程序导入错误。 var RouteHandler = require('react-router').RouteHandler;