1

TodoList コンポーネントをテストしているときに、このエラーが発生し続けます。

debug.html:38
不変違反:
要素の型が無効です:
文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要ですが、オブジェクトを取得しました。

何が原因なのかわかりません。誰かが私を正しい方向に導くことができますか?

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 に答える
0

この構文を使用する場合、Node ではデフォルトで次のようになります。

require('Todo')

node_modules ディレクトリで Todo という名前のディレクトリを検索するように、ノード モジュール Todo を検索します。ノードは、カスタム Webpack 解決の使用方法を知りません。この設定があります：

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

つまり、 Webpackは常に node_moudles で Todo という名前のファイルまたはフォルダーを確認するrequire('Todo')かimport from 'Todo'、両方をチェックapp/componentsし、フォルダーをチェックします。

テストで同じ解決トリックを使用する場合は、ブラウザー バンドルをビルドするのと同じ方法で、Webpack を使用してテスト バンドルをビルドし、そのバンドルを実行する必要があります。

それ以外の場合は、node_modules にないファイルを要求するデフォルトの Node の方法を使用する必要があります。これは相対パスを使用します。

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