React组件测试持续失败

Question

在测试我的TodoList组件时，我一直收到这个错误：

debug.html:38 不变违规： 元素类型无效： 期望字符串(用于内置组件)或类/函数(用于组合组件)，但获得: 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);
    });
});

链接到源代码：链接到源代码

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的目录一样。节点不知道如何使用自定义Webpack解析。你有这个设置

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