React/Jest - 如何模拟 event.preventDefault 和 event.stopPropagation 的行为

Question

我有一个输入字段如下：

<Input name="score" type="number" className={cx(['input-width'])} value={this.state.score} isIncomplete={false} isInvalid={this.state.isScoreInvalid} min="0" max="100" onKeyPress={this.handleInput} onChange={this.updateValue} onBlur={this.updateScoreInvalidState} />

下面的函数被调用 OnKeypress

handleInput(event) {
    const charCode = (typeof event.which === 'number') ? event.which : event.keyCode;

    if (charCode === 45 || charCode === 46) {
      console.log("Here-------------");
      event.preventDefault();
      event.stopPropagation();
    }
  }

下面的函数被调用 onChange

updateValue(event) {
    this.setState({ [event.target.name]: event.target.value });
}

我想测试这种行为： 如果输入无效：'-' OR '.' 忽略输入并且不更新状态变量得分。 进行以下测试。

it('should render input field correctly with invalid character as input', () => {
    const wrapper = shallowWithIntl(<TestView {...testProps} />).first().shallow();
    const score = wrapper.find('Input[name="score"]');
    const onKeypressEvent = {
      preventDefault: jest.fn(),
      stopPropagation: jest.fn(),
      which: 45,
      target: { name: 'score', value: '-' },
    };
    const onChangeEvent = {
      target: { name: 'score', value: '-' },
    };

    expect(wrapper.state('score')).toEqual(5);
    expect(wrapper.state('isScoreInvalid')).toEqual(false);

    score.simulate('keypress', onKeypressEvent);
    score.simulate('change', onChangeEvent);
    wrapper.update();

    expect(wrapper.state('score')).toEqual(5);
    expect(wrapper.state('isScoreInvalid')).toEqual(false);
  });

测试未按预期工作。它并没有阻止事件发生。

如何测试这个功能？谢谢！

Answer 1

const event = {
    preventDefault: jest.fn(),
    clipboardData: {
      getData: () => pasteValue,
    },
  } as unknown as React.ClipboardEvent<HTMLInputElement>;