jestjs - 如何使用 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)
  }
}

我们如何测试 onDismiss添加到 Alert 的函数成分。

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使用 spy ，可以对其进行测试以检查是否使用正确的参数调用了它。