javascript - 错误：方法“模拟”仅用于在单个节点上运行。找到了 0 个

问题描述

我是 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)

我在测试中遗漏了什么。？

标签： javascriptreactjsjestjsenzyme

javascript - 错误：方法“模拟”仅用于在单个节点上运行。找到了 0 个

问题描述

解决方案

推荐阅读