如何使用 Enzyme 正确测试输入更改事件？答案

【问题标题】：How do I properly test input change events with Enzyme?如何使用 Enzyme 正确测试输入更改事件？
【发布时间】：2018-07-15 13:54:23
【问题描述】：

我正在尝试 Jest/Enzyme，但在尝试创建一个简单示例时遇到了问题。

我有一个小组件，其中包含一个应该更新 DIV 文本的输入。我想编写一个测试来证明 DIV 已更新。

我的测试是这样的：

const app = shallow(<App {...state} />);
const input = app.find('input');

input.simulate('keyDown', {keyCode: 72});
input.simulate('keyDown', {keyCode: 73});
input.simulate('change', {target: input});

expect(app.find('[test="mirror"]').text()).toEqual('hi');

我知道输入实际上返回了ShallowWrapper。您可以在下面的组件中看到，我正在通过查看 e.target.value 来更新状态。有没有办法将实际的 DOM 节点传递给我对change 的模拟？模拟 keyDown 会真正更新输入值吗？还是我应该换一种方式？

import React from 'react'
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mirror: ''
    };
    this.updateMirror = this.updateMirror.bind(this);
  }

  updateMirror(e) {
    let val = e.target.value;
    this.setState((prevState, props) => {
      return {
        mirror: val
      };
    });
  }

  render() {
    return <div>
      <div><input type="text" onChange={this.updateMirror} /></div>
      <div test="mirror">{this.state.mirror}</div>
    </div>
  }
}
export default App

【问题讨论】：

标签： reactjs jestjs enzyme

【解决方案1】：

试试这样的：

const wrapper = shallow(<App {...state} />);
wrapper.find('input').simulate('change', {target: {value: 'Your new Value'}});
expect(wrapper.state('mirror')).toBe('Your new Value');

【讨论】：

是的，我想过。我基本上想知道是否有人像用户那样模拟按键。另一方面，对于集成测试来说可能更是如此，所以这样的测试应该没问题。
我认为你可以这样做： wrapper.find('input').simulate('keyDown', {keyCode: 72}) ...（如果那是你正确的 keyCode）。我看到你很亲密，也最好使用wrapper（酶共识）而不是input或其他任何东西。