陣營組件測試未能保持

我不斷收到此錯誤測試我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

陣營組件測試未能保持

回答

相關問題