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={''}
/>

尝试通过一个或多个：）

错误：方法“模拟”仅应在单个节点上运行。找到0个代替

1 个答案: