React 组件测试一直失败

Question

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

debug.html:38
Invariant Violation:
Element type is invalid:
expected a string (for built-in components) or a class/function (for composite components) but got: 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转源代码：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 的方式导入它。

如果您仍想在测试中使用 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 的目录。 Node 不知道如何使用自定义 Webpack 解析。你have this setting:

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

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

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

否则你必须使用默认的 Node 方式来获取不在 node_modules 中的文件，这是相对路径：

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

React 组件测试一直失败

React component test keeps failing

reactjs

reactjs-testutils