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

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

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

How to test event handlers Using enzyme

jestjs

enzyme