React组件测试不断失败

时间:2016-11-27 02:51:51

标签: reactjs reactjs-testutils

在测试我的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

3 个答案:

答案 0 :(得分: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;

希望有所帮助:)

答案 1 :(得分:1)

或者:

const TodoList = require('TodoList').default;
const Todo = require('Todo').default;

答案 2 :(得分:0)

默认情况下,在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');