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

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

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

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