使用Jest或Enzyme测试React组件内生成的事件

Question

我创建了一个react组件作为自动保存输入字段。预期行为是：

1. 如果用户点击Enter或在框外单击，它将使用调用其onSubmit道具用户输入的值
2. 如果用户点击Escape键，则会将该值重置为props.lastSavedValue
3. 当按下Enter或Escape时，输入字段会散焦

组件的代码为：

class AutoSavingInput extends React.Component {
constructor (props) {
super(props)
this.state = {currentValue: props.lastSavedValue || ''}
}
render() {
return (
<input
ref={(input) => this.input = input}
value={this.state.currentValue}
onChange={(e) => this.setState({currentValue: e.target.value})}
onBlur={() => this.props.onSubmit(this.state.currentValue)}
onKeyUp={(event) => {
switch (event.key) {
case 'Enter':
this.input.blur()
break
case 'Escape': {
this.setState({currentValue: this.props.lastSavedValue},
() => this.input.blur())
break
}
}
}}
/>
)
}
}

用Jest或Enzyme测试blur事件很简单，但我在测试时遇到了麻烦按键事件。我试过：

function setup () {
const onSubmit = jest.fn()
const component = ReactTestUtils.renderIntoDocument(
<AutoSavingInput lastSavedValue="last-saved-value" onSubmit={onSubmit} />
)
const node = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'input')
component.setState({currentValue: 'the-value'})
return { component, node, onSubmit }
}
// THIS TEST SHOULD PASS BUT IT FAILS
it('submits when Enter key is pressed', () => {
const { node, onSubmit } = setup()
ReactTestUtils.Simulate.keyUp(node, {key: 'Enter'})
expect(onSubmit).toHaveBeenCalledWith('the-value')
})
// THIS TEST SHOULD FAIL BUT IT PASSES
it('does not submit when Escape key is pressed', () => {
const { node, onSubmit } = setup()
ReactTestUtils.Simulate.keyUp(node, {key: 'Escape'})
expect(onSubmit).toHaveBeenCalledTimes(0)
})

正如注释所描述的，Enter键测试在应该通过时失败，Escape键该失败时测试通过。这是因为在测试环境中，this.input.blur()没有触发blur事件。

当我在浏览器中进行测试时，代码的行为与预期的一样。

是否可以编写一个Jest或Enzyme测试来处理组件内发出的事件？

如果有人想尝试的话，我已经在这里把代码放在了一个创建反应应用程序项目中：https://github.com/RobbieClarken/testing-react-component-events

Answer 1

看起来keyUp事件是用来激发this.input.blur()的，您希望blur()随后触发组件的onBlur()函数并调用onSubmit()。这可能不是用Enzyme可以轻易测试的。实际上并没有DOM，所以您可能无法预期this.input.blur()会实际触发输入的onBlur()处理程序。您可能更幸运地测试keyUp事件直接激发的内容(this.input.blur()而不是onSubmit())。