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

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');