Jest, Enzyme, Cannot read property 'map' of undefined

Question

Let's say, there I am trying to add a new item into my todo list and checking if added this item correctly, with Jest and Enzyme.

First, I have tried to reach that item with defining a class to List, didn't work;

wrapper.find('#toDoInputId').simulate("change", { target: { value: "testFirst"}})
const listViewerWrapper = shallow(<ListItems/>);
const input = wrapper.find('.list');
const result = input.text();

Then I have tried to reach out directly in the document;

const testFirst = getByText(/testFirst/i);
expect(testFirst).toBeInTheDocument();

But sadly none of these has worked and having the following error;

  TypeError: Cannot read property 'map' of undefined

       6 | function ListItems(props){
       7 |     const items= props.items;
    >  8 |     const listItems = items.map(item =>
         |                             ^
       9 |         {
      10 |             return <div className="list" key={item.id}>
      11 |                         <p>

My list item js;

function ListItems(props){
    const items= props.items;
    const listItems = items.map(item =>
        {
            return <div className="list" key={item.id}>
                        <p>
                            <input
                            type="checkbox" 
                            onClick={ () => props.handleClickbox(item.id)} />
                            <input style={{ color:"white", textDecoration: item.completed ? "line-through":null}} 
                            type="text" 
                            id={item.id} 
                            value={item.task} 
                            onChange ={
                                (e) =>{
                                    props.setUpdate(e.target.value, item.id)
                                }
                            }/>
                        <span>
                            <FontAwesomeIcon className="faicons" 
                            icon='trash'
                            onClick={ () => props.deleteItem(item.id) } />
                        </span>
                        </p>
                
            </div>
        })

    return(
        <div>
            <FlipMove duration={500} easing="ease-in-out" >
            {listItems}
            </FlipMove>
        </div>
    )
}

And the related part on App.js;

  render() {
    return (
      <div className="App">
        <header>

          <form id="to-do-form" onSubmit={this.addItem}>

          <input
            id="toDoInputId"
            type="text" placeholder="Enter task"
            value={this.state.currentItem.text}
            onChange={this.handleInput}/>
          
          <button type="submit"> Add </button>

          </form>

        </header>

        <ListItems items={this.state.items}
        deleteItem = {this.deleteItem}
        handleClickbox = {this.handleClickbox}></ListItems>

      </div>
    )
  }

Thanks for any advice or answer. Happy coding!

Answer 1

You aren't passing the items prop when you shallow render ListItems.

Update the code to pass items array in props and you won't see the undefined error.

    const testItems = [{ id: 1, task: 'todo', completed: false}, { id: 2, task: 'second todo', completed: true }];
    const listViewerWrapper = shallow(<ListItems items={testItems} />);