在涉及到checkbox表单元素的单测时，我们会直观的模拟input元素的click事件以触发元素值的改变。但在使用enzyme进行组件单测时却行不通。
正确的做法
正确的做法是模拟input元素的change事件，传递想要的target.value。1
2
3
4
5
6
7
8
9
10
11
12import React from 'react'
import { mount } from 'enzyme'
it('should change checkbox value', () => {
const changeFn = e => console.log(e.target.checked)
const wrapper = mount(<input type="checkbox" onChange={changeFn} />)
wrapper.find('input').simulate('change', {
target: {
checked: true,
},
})
})
为什么？
enzyme的事件模拟系统并不是我们所想象的那样，操作真实的dom来触发dom级事件而是简单的将simulate转发到props上的相应func。
所以在测试过程中如果我们需要为组件模拟相应的事件，只需要关注组件props上onEventName中的EventName。就像以下情况：1
2<input onBlur={handleBlur} /> // simulate('blur')
<div contentEditable onInput={handleInput}></div> // simulate('input')
2019.2.26日更新
enzyme的作者ljharb并不推荐使用 simulate 触发事件的这种写法，因为它有时候会表现的莫名其妙。
作者明确表示我们应该将props的事件监听方法提取出来独立执行，详细见这条Issues
1 | const wrapper = mount(<Slider onDrag={this.handleDrag} />) |
