React + Chai + Enzyme

Question

Я пытаюсь запустить какой-то модульный тест с Chai & Enzyme to my React.

У фермента, похоже, проблема с реквизитом, который я передал компонентам. Они не определились в тестах (а не в приложении).

основной файл:

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 

import TaskList from './components/task_list'; 
import AddingInput from './components/input'; 

const titleHeader = <h1 className="app__title">Simple to-do list:</h1>; 

class App extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      tasks: [ 
       {id: 0, name: 'Complete task'}, 
       {id: 1, name: 'Add task'}, 
       {id: 2, name: 'Delete task'} 
      ], 
      id: 3, 
     }; 
    } 

(...) 

    render() { 
    return (
     <div className="app"> 
     {titleHeader} 
     <TaskList 
      tasks={this.state.tasks} 
      deleteMe={this.deleteMe.bind(this)} /> 
     <AddingInput addTodo={this.addTodo.bind(this)} /> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
<App />, 
    document.getElementById('root') 
); 

Task_list - первый компонент, я хочу, чтобы тест:

import React from 'react'; 
import TaskItem from './task_item'; 

const TaskList = (props) => { 
    const taskItems = props.tasks.map((task) => { 
     return (
      <TaskItem 
       key={task.id} 
       task={task} 
       deleteMe={props.deleteMe} 
       /> 
     ); 
    }); 

    return (
     <ol className="ordered-list"> 
      {taskItems} 
     </ol> 
    ); 
}; 

export default TaskList; 

И второе:

import React from 'react'; 

const TaskItem = React.createClass({ 
    onCompleted: function(e) { 
    e.target.className += " ordered-list__item--completed" 
    }, 
    render: function() { 

    return (
     <li><span className="ordered-list__item" onClick={this.onCompleted}>{this.props.task.name}</span> 
      <span onClick={() => this.props.deleteMe(this.props.task)} 
        className='btn btn--delete'>Delete</span> 
     </li> 
    ); 
    } 
}); 


export default TaskItem; 

вот мои тесты. Два из них передаются (оба компонента существуют), но в двух других был неопределенным на props.tasks:

import React from 'react'; 
import { expect, assert } from 'chai'; 
import { shallow, mount } from 'enzyme'; 
import TaskList from './src/components/task_list'; 
import TaskItem from './src/components/task_item'; 

describe('TaskList',() => { 
    it('should render TaskItem',() => { 
     const wrapper = shallow(<TaskList />); 
     expect(wrapper.containsAllMatchingElements([ 
      <TaskItem />, 
     ])).to.equal(true); 
    }); 
    it('should exists',() => { 
     assert.isDefined(TaskList) 
    }) 
}); 
describe('TaskItem',() => { 
    it('should render one item of unordered list',() => { 
     const item = mount(<TaskItem />); 
     expect(item).to.contain('li'); 
    }); 
    it('should exists',() => { 
     assert.isDefined(TaskList) 
    }) 
}); 

Проблемы: 1) TaskList должны оказывать TaskItem: TypeError: Не удается прочитать свойство «карты» неопределенной 2) TaskItem должен отображать один элемент маркированного списка: TypeError: не удается прочитать «имя» свойства неопределенного

Answer 1

Вашего App компонента проходит tasks пропеллера:

<TaskList 
    tasks={this.state.tasks} 
    deleteMe={this.deleteMe.bind(this)} /> 

И TaskList ожидает, что он всегда присутствует. Аналогично, TaskItem рассчитывает, что всегда имеется определенный реквизит (от TaskList).

Если вы добавите необходимые реквизиты в свои модульные тесты, он должен работать. Для TaskList это может выглядеть примерно так:

const tasks = [ 
    {id: 0, name: 'Complete task'}, 
    {id: 1, name: 'Add task'}, 
    {id: 2, name: 'Delete task'} 
]; 
const wrapper = shallow(<TaskList tasks={tasks}/>);