Реактивный тест компонента продолжает терпеть неудачу

Question

Я продолжаю получать эту ошибку при тестировании моего компонента TodoList:

debug.html: 38
Нарушение Инварианта:
Тип элемента недействителен:
ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект.

Я не уверен, что вызывает это. Кто-нибудь может привести меня в правильном направлении?

TodoList.js:

import React from 'react';

import Todo from 'Todo';

class TodoList extends React.Component {
    renderTodos(todos) {
        return todos.map(todo => {
            return <Todo key={todo.id} {...todo} />;
        });
    }
    render() {
        const { todos } = this.props;
        return (
            <div>
                {this.renderTodos(todos)}
            </div>
        );
    }
}

export default TodoList;

TodoList.test.js:

const React = require('react');
const ReactDOM = require('react-dom');
const TestUtils = require('react-addons-test-utils');
const expect = require('expect');
const $ = require('jQuery');

const TodoList = require('TodoList');
const Todo = require('Todo');

describe('TodoList', () => {
    it('should exist', () => {
        expect(TodoList).toExist();
    });

    it('should render one Todo component for each todo item', () => {
        const todos = [{
            id: 1,
            text: "Do something"
        }, {
            id: 2,
            text: "Check mail"
        }];
        const todoList = TestUtils.renderIntoDocument(<TodoList todos={todos} />);
        const todoComponents = TestUtils.scryRenderedComponentsWithType(todoList, Todo);

        expect(todoComponents.length).toBe(todos.length);
    });
});

Ссылка на исходный код: ссылка на исходный код

Answer 1

В вашем TodoList.Test.js удалите

const TodoList = require('TodoList');
const Todo = require('Todo');

и заменить его на

import TodoList from 'TodoList'
import Todo from 'Todo

Это связано с тем, что вы экспортируете свои компоненты способом ES6 и импортируете его способом nodejs.

Если вы все еще хотите использовать require в своем тесте, вам придется заменить

export default TodoList

с

module.exports = TodoList;

Надеюсь, поможет:)

Answer 2

Альтернативно:

const TodoList = require('TodoList').default;
const Todo = require('Todo').default;

Answer 3

По умолчанию в Node, если вы используете этот синтаксис:

require('Todo')

Он будет искать модуль узла Todo, так как он будет искать в вашем каталоге node_modules каталог с именем Todo. Узел не знает, как использовать пользовательские веб-пакеты. У вас есть этот параметр:

    modulesDirectories: [
        'node_modules',
        './app/components'
    ],

Значение в любое время, когда Webpack видит require('Todo') или же import from 'Todo' он проверит оба в node_moudles для файла или папки с именем Todo, и проверит app/components для папки.

Если вы хотите использовать тот же прием решения в своих тестах, вы должны создать тестовый пакет с Webpack и запустить этот пакет, так же, как вы строите пакет браузера.

В противном случае вы должны использовать способ Node по умолчанию, чтобы требовать файлы не в node_modules, то есть с относительными путями:

const TodoList = require('../../components/TodoList');
const Todo = require('../../components/Todo');