如何在Jest中模拟文本的输入和回车

// 假设有一个输入框组件 Input，其中包含一个文本框和一个按钮
import React from 'react';

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleKeyPress(event) {
    if (event.key === 'Enter') {
      this.props.onSubmit(this.state.value);
    }
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.value}
          onChange={event => this.handleChange(event)}
          onKeyPress={event => this.handleKeyPress(event)}
        />
        <button onClick={() => this.props.onSubmit(this.state.value)}>Submit</button>
      </div>
    );
  }
}

export default Input;

import React from 'react';
import { shallow } from 'enzyme';
import Input from './Input';

describe('Input component', () => {
  it('should call onSubmit handler when Enter key is pressed', () => {
    const onSubmit = jest.fn(); // 创建一个模拟的 onSubmit 函数
    const wrapper = shallow(<Input onSubmit={onSubmit} />); // 渲染 Input 组件

    // 模拟输入文本并触发回车事件
    wrapper.find('input').simulate('change', { target: { value: 'Hello' } });
    wrapper.find('input').simulate('keyPress', { key: 'Enter' });

    // 检查 onSubmit 是否被调用，且参数是否正确
    expect(onSubmit).toHaveBeenCalledWith('Hello');
  });
});