使用 `Backspace` fireEvent 从后面删除字符

Question

我尝试使用 Backspace 事件从后面移除一个角色，但它没有按预期工作。

它不会让我使用 `Backspace 从后面删除字符。

input.focus()
const options = {
    key: 'Backspace',
    keyCode: 8,
    which: 8,
}
fireEvent.keyDown(input, options)
fireEvent.keyUp(input, options)

复制：https://codesandbox.io/s/testing-library-delete-1-character-i4y3d?file=/src/input.test.js:507-753

Answer 1

我可以通过添加这个功能来解决这个问题。

function backspace(element) {
  let actuallyTyped = element.value;

  const backspaceKey = {
    key: 'Backspace',
    code: 8,
    inputType: 'deleteContentBackward',
  };

  const sharedEventConfig = {
    key: backspaceKey.key,
    charCode: backspaceKey.code,
    keyCode: backspaceKey.code,
    which: backspaceKey.code,
    modifier: backspaceKey.modifier,
  };
  const downEvent = fireEvent.keyDown(element, sharedEventConfig);

  if (downEvent) {
    actuallyTyped = actuallyTyped.slice(0, -1);

    fireEvent.input(element, {
      target: { value: actuallyTyped },
      inputType: backspaceKey.inputType,
      bubbles: true,
      cancelable: true,
    });
  }

  fireEvent.keyUp(element, sharedEventConfig);
}

然后在我的测试任务中调用它。

  // delete up 5 times
  let count = 5;
  do {
    backspace(input);
  } while (count--);

使用 `Backspace` fireEvent 从后面删除字符

Remove character from behind using `Backspace` fireEvent

javascript

reactjs

react-testing-library

testing-library