1

在测试我的 TodoList 组件时，我不断收到此错误：

debug.html:38
Invariant Violation：
元素类型无效：
期望字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

我不确定是什么原因造成的。谁能引导我走向正确的方向？

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

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

4

3 回答 3

2

在您的 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;

希望能帮助到你 ：）

于 2016-11-27T04:05:29.730 回答
1

或者：

const TodoList = require('TodoList').default;
const Todo = require('Todo').default;
于 2016-11-27T04:13:08.963 回答
0

默认情况下，在 Node 中，如果您使用以下语法：

require('Todo')

它将查找节点模块 Todo，因为它将在您的 node_modules 目录中查找名为 Todo 的目录。Node 不知道如何使用自定义 Webpack 解析。你有这个设置：

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

这意味着任何时候 Webpack 看到 arequire('Todo')或者import from 'Todo'它都会在 node_moudles 中检查一个名为 Todo 的文件或文件夹，并且它会检查app/components一个文件夹。

如果您想在测试中使用相同的解析技巧，您必须使用 Webpack 构建一个测试包并运行该包，就像构建浏览器包一样。

否则，您必须使用默认的 Node 方式来要求不在 node_modules 中的文件，即使用相对路径：

const TodoList = require('../../components/TodoList');
const Todo = require('../../components/Todo');
于 2016-11-27T04:14:11.383 回答