Ошибка теста Jest с компонентом React

Я пытаюсь протестировать компонент реакции, вот тест

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», я получаю следующее предупреждение и предупреждение об ошибке: React.createElement: тип не должен быть нулевым, неопределенным, логическим или числовым. Это должна быть строка (для элементов 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;

person user_mda    schedule 08.06.2016    source источник


Ответы (1)


Есть ли в вашем компоненте

module.exports = App;

часть?

Похоже, вы могли не импортировать его должным образом

Вам также необходимо импортировать компоненты Link и RouteHandler внутри файла компонента, прямо под тем местом, где вы импортируете React.

person Grgur    schedule 08.06.2016
comment
Все еще получаю ту же ошибку после его добавления. Просто чтобы уточнить, я добавил его в конец файла - person user_mda; 08.06.2016
comment
Хорошо, теперь просто убедитесь, что вы включили его вот так: var Navigation = require('../js/components/Navigation.js'); - person Grgur; 08.06.2016
comment
Это ошибка для метода рендеринга компонента навигации. - person user_mda; 08.06.2016
comment
Вам также необходимо импортировать компоненты Link и RouteHandler внутри файла компонента, прямо под тем местом, где вы импортируете React. Обновил мой ответ. - person Grgur; 08.06.2016
comment
Обработчик маршрута импортирован неправильно. var RouteHandler = require('react-router').RouteHandler; - person Grgur; 08.06.2016
comment
Спасибо, я изменил его, но все равно та же ошибка - person user_mda; 08.06.2016
comment
Можете ли вы console.log('Navigation', Navigation); из теста просто убедиться, что он загружен? Вам также не нужен .js в require - person Grgur; 08.06.2016
comment
Я попытался зарегистрировать его и его «неопределенное», я удалил .js в своем импорте. - person user_mda; 08.06.2016
comment
Исправлено, я импортировал компонент внутри метода описания! - person user_mda; 08.06.2016
comment
Да спасибо! Modules.export также был необходим для его работы! - person user_mda; 08.06.2016