Question

假设，我正在尝试将新项目添加到待办事项列表中，并使用Jest和Enzyme检查是否正确添加了该项目。

首先，我试图通过为List定义一个类来达到该目的，但是没有用；

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

然后我尝试直接在文档中进行搜索；

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

但是遗憾的是，这些方法都没有起作用，并且出现以下错误；

  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>

我的列表项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>
    )
}

以及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>
    )
  }

感谢您的任何建议或答案。编码愉快！

Answer 1

浅渲染ListItems时，您不会传递道具。

更新代码以在props中传递项目数组，您将不会看到未定义的错误。

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

开玩笑，酶，无法读取未定义的属性“地图”

1 个答案: