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

Question

я получаю эту ошибку при тестировании моего ToDoList компонента:

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

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

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); 
    }); 
}); 

Ссылка на исходный код: link to source code

Answer 1

В ваших TodoList.Test.js, удалить

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

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

import TodoList from 'TodoList' 
import Todo from 'Todo 

Это происходит потому, что вы экспортируете ваши компоненты в пути ES6 и импортировать его в nodejs путь.

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

export default TodoList 

с

module.exports = TodoList; 

Надеется, что это помогает :)

Answer 2

альтернативны:

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

Answer 3

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

require('Todo') 

Он будет искать модуль узла Todo, как это будет выглядеть в каталоге node_modules для каталога с именем Todo. Узел не знает, как использовать настраиваемый Webpack. Вы have this setting:

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

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

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

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

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