Remove character from behind using `Backspace` fireEvent doesn't work

[rohmanhm]

• @testing-library/react version: ^10.0.4
• Testing Framework and version: "jest": "^24.8.0"
• DOM Environment: "@testing-library/jest-dom": "^5.7.0"

Relevant code or config:

input.focus()
const options = {
    key: 'Backspace',
    keyCode: 8,
    charCode: 8,
    which: 8,
}
fireEvent.keyPress(input, options) // Doesn't work
fireEvent.keyDown(input, options) // Doesn't work
fireEvent.keyUp(input, options) // Doesn't work

What you did:

I try to remove a character from behind using the Backspace event from keyboard but it didn't work as expected.

What happened:

It won't let me delete the character from behind using Backspace.

Reproduction:

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

Problem description:

Suggested solution:

[rohmanhm]

Solved https://stackoverflow.com/a/62101163/5531595

cc @kentcdodds

[pranjaljately]

Similar to this, if I wanted to remove a character using backspace on the component below, what would be the best way to test it?

None of fireEvent.keyPress, fireEvent.keyDown and fireEvent.keyUp would trigger the onChange so what could be used? Any suggestions...

Also, bit out of scope for this repo, but is it possible to do something like userEvent.type('{backspace}') or userEvent.type({ key: 'Backspace', code: 'Backspace' })? And if no, shoud there be? @kentcdodds

import React, { useState } from 'react';

const Input = () => {
  const [value, setValue] = useState(1234);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <input type='text' name='name' value={value} onChange={handleChange} />
  );
};

export default Input;

[rohmanhm]

@pranjaljately Yes they're working on that already in testing-library/user-event#235