fireEvent.keyPress() is not working

[ak-spotter]

I have a checkbox which I want to test using keyPress. The checkbox should be checked on pressing the Space key. Here's my Component file-

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input type="checkbox" data-testid="testing-it" />
    </div>
  );
}

And the test file-

import { fireEvent, render } from "@testing-library/react";
import "@testing-library/jest-dom";

import App from "./App";

describe("App", () => {
  it("should work as expected", async () => {
    const { getByTestId } = render(<App />);

    const testCheckBox = getByTestId("testing-it");
    expect(testCheckBox).not.toBeChecked();
    console.log("testCheckBox...", testCheckBox);

    fireEvent.focus(testCheckBox);
    fireEvent.keyPress(testCheckBox, {
      keyCode: 32,
      charCode: 32,
      key: " ",
      code: "Space"
    });

    expect(testCheckBox).toBeChecked(); // this fails
  });
});

The test fails at the second expect statement- expect(testCheckBox).toBeChecked(); However it should have passed as I focused the checkbox and pressed the Space key.

CodeSandbox link- https://codesandbox.io/s/cool-star-6k6ghp

[MatanBobi]

Hi @ak-spotter, thanks for opening this. AFAIR, in order to check a checkbox, you need to run a click event and not keypress. If you'll add a callback for the onKeyPress on the input, you'll see that it is being called. Other than that, I highly suggest using user-event for these kind of interactions. fireEvent only dispatches the event and doesn't handle any behavior. I understand why this can be confusing but this is the expected behavior in this case.

[ak-spotter]

Hi @MatanBobi Thanks for the quick response.🙂 When I manually hit the Space key on the UI after focusing the checkbox, it gets checked. So I was expecting the same behaviour in the test too. I also tried using userEvent instead of fireEvent, but it didn't work.

I actually want to test a draggable element of react-beautiful-dnd using keyPress() or keyDown(). The checkbox was just a simpler example. I saw an answer on StackOverflow explaining how to test the drag behaviour using keyDown() https://stackoverflow.com/a/74068706/7533126 and I tried the same, but it didn't work.

[MatanBobi]

Got you. It does look like the onKeyPress is being called but the checkbox isn't being checked. I think that it's probably some spec decision and not something to do with testing-library (probably somewhere in JSDOM). If there's a specific issues with react-beautiful-dnd, I suggest trying to understand how to test that component, either by opening an issue in their repo or using stackoverlfow. If you still believe there's an issue with testing-library, please feel free to comment here and I'll re-open :)