阵营组件测试未能保持

我不断收到此错误测试我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

来源

2016-11-27 Funk Soul Ninja

在你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;

希望它能帮助:)

来源

2016-11-27 04:05:29 Swapnil

哇。我认为es5和es6语法是完全等同和可互换的。我学到了一些新东西。谢谢。 –

或者：

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

来源

2016-11-27 04:13:08

默认情况下，在节点，如果您使用此语法：

require('Todo')

它会寻找节点模块待办事项，如它会看着你的node_modules目录名为待办事项目录。节点不知道如何使用定制的Webpack解析。您have this setting：

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

含义任何时候的WebPack看到一个require('Todo')或import from 'Todo'它都将在node_moudles文件或文件夹名为待办事项检查，它会检查app/components一个文件夹。

如果您想在测试中使用相同的解决方案，您必须使用Webpack构建测试包并运行该包，这与构建浏览器包的方式相同。

否则，您必须使用默认的节点的方式，要求在node_modules文件没有，这是相对路径：

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

来源

2016-11-27 04:14:11

阵营组件测试未能保持

回答

相关问题