Question

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

debug.html：38
  不变违规：
  元素类型无效：
  期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：object。

我不确定导致它的原因。有人能引导我走向正确的方向吗？

TodoList.js：

function getCorporateService(id){
//create new row
    $br = "<tr id='item'>";
    $br += "<td> <input class='input-small' type='text' id='order_identifier' name='order_identifier' readonly></td>";
    $br += "<td><input class='input-small' type='text' id='service["+id+"]' name='service["+id+"]' readonly></td>";
    $br += "<td><select id='order_type["+id+"]' name='order_type["+id+"]'> <option> - </option> <option value='add'>Add</option> <option value='change'>Change</option> <option value='cancel'>Cancel</option> </select></td>";
    $br += "<td><input class='input-small' type='text' id='select_plan["+id+"]' name='select_plan["+id+"]'></td>";
    $br += "<td><input class='input-mini' type='text' id='qty["+id+"]' name='qty["+id+"]'></td>";
    $br += "<td><input class='input-small' type='text' id='unit_price["+id+"]' name='unit_price["+id+"]'></td>";
    $br += "<td><input class='input-small' type='text' id='total_price["+id+"]' name='total_price["+id+"]'></td>";
    $br += "<td><input class='input-small' type='text' id='notes["+id+"]' name='notes["+id+"]'></td>";
    $br += "</tr>";

    $(".corporatesvc").append($br);

    //get data and parsing to column
    $.get("{{ url('salesorder/service')}}/"+id, function(data){
        console.log(id);
        console.log(data);
        $.each(data, function (index, element){
            $('#service['+id+']').val(element.service_name);
        });
    });
}

TodoList.test.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;

源代码链接：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组件测试不断失败

3 个答案: