【问题标题】:Error: Method “simulate” is only meant to be run on a single node. 0 found instead错误:方法“模拟”仅用于在单个节点上运行。找到了 0 个
【发布时间】: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


    【解决方案1】:

    我认为问题是由于下面第 3 行没有通过 cmets 引起的。

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

    尝试通过一个或多个:)

    【讨论】:

      猜你喜欢
      • 2020-02-08
      • 1970-01-01
      • 2017-08-21
      • 2016-09-19
      • 2017-02-02
      • 2019-03-16
      • 1970-01-01
      • 1970-01-01
      • 2019-07-14
      相关资源
      最近更新 更多