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

Question

我们如何使用酶使用浅渲染来测试点击处理程序

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)
  }
}

我们如何测试onDismiss添加到Alert组件的功能.

Answer 1

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

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示例一起使用，我console.log用一个间谍进行了模拟，可以对其进行测试以检查是否使用正确的参数调用了它。