React Testing Library中fireEvent.keyPress/keyDown失效问题排查

我需要测试复选框通过按下空格键完成选中的功能，但在React Testing Library中使用fireEvent.keyPress()和fireEvent.keyDown()都没效果，换成fireEvent.click()就能正常工作。

组件代码 #

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>
  );
}

测试代码 #

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();

    fireEvent.focus(testCheckBox);
    fireEvent.keyPress(testCheckBox, { // 也试过fireEvent.keyDown
      keyCode: 32,
      charCode: 32,
      key: " ", // 也试过"Space"
      code: "Space"
    });

    expect(testCheckBox).toBeChecked(); // 这里断言失败
  });
});

测试里第二个断言始终失败，明明已经聚焦了复选框并模拟了空格按键，理论上应该能选中才对，但用fireEvent.click()就没问题。

原因 #

浏览器中，复选框的选中状态切换是在空格键的keyUp事件触发时完成的，而不是keyPress或keyDown事件，这就是你之前用那两个事件无效的核心原因。

修复方案1：改用fireEvent.keyUp #

只需要把事件类型换成keyUp，并简化参数（只传key: " "就行，冗余参数没必要）：

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();

    fireEvent.focus(testCheckBox);
    fireEvent.keyUp(testCheckBox, { key: " " });

    expect(testCheckBox).toBeChecked();
  });
});

修复方案2：使用userEvent（推荐） #

React Testing Library官方更推荐用userEvent来模拟真实用户交互，它会自动处理正确的事件序列，代码更简洁，也更贴近真实用户操作：

import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import "@testing-library/jest-dom";

import App from "./App";

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

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

    // 方案A：直接模拟聚焦+空格
    await user.focus(testCheckBox);
    await user.keyboard(" ");

    // 方案B：或者直接模拟点击（如果只是测试选中功能）
    // await user.click(testCheckBox);

    expect(testCheckBox).toBeChecked();
  });
});

内容的提问来源于stack exchange，提问作者Abhinandan Kushwaha