如何使用酶正确测试输入变化事件？

Question

我正在试试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

Answer 1

尝试这样的事情:

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