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

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} />);