如何使用enzyme测试事件处理程序

Question

我们如何使用enzyme进行浅渲染来测试点击处理程序？

class Example extends React.Component {
  render() {
    const {
      message
    } = this.props
    return <Alert key={message.id} bsStyle={message.state} onDismiss={()=>this.handleAlertDismiss(message.id)}>{message.text}</Alert>
  }
  handleAlertDismiss = (id) = > {
    console.log(id)
  }
}

我们如何测试添加到Alert组件的onDismiss函数？

- Kamaraju

Answer 1

创建组件并像这样调用dismiss函数。

const log = jest.fn();
global.console = {log}
example = shallow(<Example message={{id: 'test'}}/>); 
example.props('onDismiss')() //just find the dismiss prop and call the function
expect(log).toHaveBeenCalledWith('test')

你的示例存在问题，因为没有实际内容可供测试。为了使其与你的console.log示例配合使用，我使用间谍mock console.log，可以测试以检查是否使用正确的参数调用了它。

- Andreas Köberle

---

是的，我其实不确定如何调用 onDismiss，如果它像这样 <Alert key={message.id} bsStyle={message.state} onDismiss={this.handleAlertDismiss}>{message.text}</Alert> 而不是在 render 方法中使用回调函数，我会测试 wrapper.instance().handleAlertDismissed。我的意图并不是要使用 console.log，如果有误导的地方请见谅。 - Kamaraju

好的，但是你的问题解决了吗？通常你只需要搜索你的组件，找到属性并调用它。你也可以使用simulate，它基本上做了相同的事情。http://airbnb.io/enzyme/docs/api/ShallowWrapper/simulate.html - Andreas Köberle