Ошибка: метод «имитация» предназначен для запуска только на одном узле. 0 найдено вместо

Question

Я новичок в Reactjs и пытаюсь проверить свой компонент с помощью Jest и энзима. Когда я пытаюсь смоделировать щелчок, он не работает, я хочу знать, чего не хватает?

Ниже мой компонент:

const ViewListComments = props => (
    <div className={styles['comments-list']}>
        <h5 className={styles['comment-header']}>Comments</h5>
        <ul className="collection">
            {props.comments.map(comment =>
                <li className="collection-item avatar" key={comment.id}>
                    <img src={IMG} alt="" className="circle"/>
                    <span className="title"><b>{comment.author}</b></span><br/>
                    <span className={`title ${styles['date-font-size']}`}><i>{formatDate(comment.created_at)}</i></span>
                    <p className={styles['comment-body']}>
                        <br/>
                        {comment.body}
                    </p>
                    <div className="secondary-content">
                        <i className={`material-icons ${styles['icon-red']}`} onClick={event => props.deleteComment(comment.id)}>delete</i>
                        <i className="material-icons" onClick={(e) => {
                            $('#foo').modal('open')
                            props.editComment(comment)
                        }}>edit</i>
                        <i className="material-icons">reply</i>
                    </div>
                    <div>
                        <Modal
                            id='foo'
                            actions=""
                            className={styles['align-edit-modal']}
                            header=''>
                            <ViewComments
                                handleSubmit={props.modalCallEdit}
                                value={props.body}
                                handleChange={props.handleChange}
                                buttonsStyles={`row  right ${styles['edit-buttons-styles']}`}
                                labelComment={'Edit Comment'}
                                buttonText={'Edit'}
                                cancelText={'Cancel'}
                                handleCancel={props.clearHandler}
                            />
                        </Modal>
                    </div>

                </li>)}
        </ul>
    </div>
);

Это позволяет пропускать реквизит внутри него, поэтому ниже моя функция тестирования:

it('calls editComment', () => {
        let editComment = jest.fn();
        wrapper = shallow(
            <ViewListComments deleteComment='Success!'
                  editComment={editComment}
                  comments={[]}
                  handleChange={jest.fn} body={''}
            />
        );
        wrapper.find('li').at(0).find('.secondary-content>i').at(1).simulate('click');
    });

Но этот тест не пройден, и я не знаю почему: n. это терпит неудачу с ошибкой ниже:

Ошибка: метод «имитация» предназначен для запуска только на одном узле. 0 найдено вместо.

  72 |            />
  73 |        );
> 74 |        wrapper.find('li').at(0).find('.secondary-content>i').at(1).simulate('click');
     |                                                                    ^
  75 |    });
  76 | 
  77 | 

  at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1828:17)
  at ShallowWrapper.simulate (node_modules/enzyme/build/ShallowWrapper.js:1078:21)
  at Object.simulate (src/tests/components/comments/viewComments.test.js:74:63)

Далее также приведены строки, которые не были проверены в компоненте:

<li className="collection-item avatar" key={comment.id}>

<i className={`material-icons ${styles['icon-red']}`} onClick={event => props.deleteComment(comment.id)}>delete</i>

$('#foo').modal('open')
props.editComment(comment)

Чего мне не хватает в моих тестах .?

Answer 1

Я полагаю, что проблема вызвана отсутствием комментариев в строке 3 ниже.

<ViewListComments deleteComment='Success!'
   editComment={editComment}
   comments={[]}
   handleChange={jest.fn} body={''}
/>

Попробуйте передать один или несколько:)