【发布时间】:2018-11-01 06:06:37
【问题描述】:
我是 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 。它失败并出现以下错误:
错误:方法“simulate”只能在单个节点上运行。 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)
我在测试中遗漏了什么?
【问题讨论】:
标签: javascript reactjs jestjs enzyme