Question

我正在尝试模拟对react组件中的dom元素的单击，并声明基于此调用间谍。这是测试的相关部分（使用karma，mocha，chai，sinon，但我很确定这里不相关）：

const selectSpy = sinon.spy();
const component = TestUtils.renderIntoDocument(<SomeComponent onSelect={selectSpy} />);
TestUtils.Simulate.click(TestUtils.scryRenderedDOMComponentsWithTag(component, 'li'));
expect(selectSpy.called).to.be.ok;

这是反应成分：

render() {
    let { title , data, onSelect }  = this.props;
    console.log(this.props.onSelect); // This correctly logs out the spy
    return (
      <div>
        <ul>{data.map((row, i) => {
          return <li onClick={this.handle.bind(this,row)} key={i}>{row.title}</li>; })}
        </ul>
      </div>
    )
}

handle(row) {
    this.props.onSelect(row);
}

测试运行但结果是测试失败，并显示“预期错误为真”的消息。我看不出代码有多大错 - 没有错误，我的间谍正确传递。我还需要做些什么吗？

Answer 1

TestUtils.Simulate.click需要一个DOM元素，但scryRenderedDOMComponentsWithTag会返回一个DOM元素数组。

尝试更改

TestUtils.Simulate.click(TestUtils.scryRenderedDOMComponentsWithTag(component, 'li'));

到

TestUtils.Simulate.click(TestUtils.scryRenderedDOMComponentsWithTag(component, 'li')[0]);

React Test Utils - 执行模拟点击时未调用间谍 -

1 个答案: