React Testing Library测试Input时userEvent.clear不生效问题

你遇到的清空无效问题核心是两个：

1. 你测试的Search是受控组件：输入框的value完全由外部传入的title prop控制，组件本身不会主动修改value，只会在输入变化时触发onChangeHadler回调通知父组件更新。但你测试里用的mockedOnChange是没有更新逻辑的空mock函数，触发后不会修改传入组件的title值，所以不管执行clear还是type，输入框的值永远是你初始传入的test。
2. 你使用的@testing-library/user-event如果是v14及以上版本，所有交互API都是异步的，你写的userEvent.clear(input)没有加await，本身执行时序就有问题。

• 所有userEvent交互操作前必须加await，v14版本推荐先调用userEvent.setup()初始化操作实例。
• 测试受控组件交互时，需要模拟父组件的状态更新逻辑：监听mock回调的返回值，拿到新的输入值后通过rerender方法重新渲染组件，把新值传给title prop，完全还原真实的单向数据流。
• 提前检查props名拼写：你测试里传的是onChangeHadler，确认和组件内定义的接收字段一致，避免回调根本没触发的问题。

import { screen, waitFor } from "@testing-library/react";
import Search from "../Search";
import { render } from "../../../test-utils/test-utils";
import "@testing-library/jest-dom";
import userEvent from "@testing-library/user-event";

describe("input should be filled with title", () => {
  test("input should be empty initially", () => {
    const mockedOnChange = jest.fn();
    render(<Search title="" onChangeHadler={mockedOnChange} />);
    const input = screen.getByRole("textbox", { name: /search/i });
    expect(input).toHaveValue("");
  });

  test("input should update by typed text", async () => {
    const user = userEvent.setup();
    // 模拟父组件的可变状态
    let searchValue = "test";
    const mockChangeHandler = jest.fn((newValue) => {
      searchValue = newValue;
    });

    // 取出rerender方法用于更新props
    const { rerender } = render(
      <Search title={searchValue} onChangeHadler={mockChangeHandler} />
    );
    const input = screen.getByRole("textbox", { name: /search/i });
    expect(input).toHaveValue("test");

    // 执行清空操作，必须加await
    await user.clear(input);
    // 校验回调被正确触发，拿到空值
    expect(mockChangeHandler).toHaveBeenCalledWith("");
    // 模拟父组件收到新值后重渲染，传入更新后的title
    rerender(<Search title={searchValue} onChangeHadler={mockChangeHandler} />);
    expect(input).toHaveValue("");

    // 测试输入逻辑
    await user.type(input, "su");
    expect(mockChangeHandler).toHaveBeenLastCalledWith("su");
    rerender(<Search title={searchValue} onChangeHadler={mockChangeHandler} />);
    await waitFor(() => expect(input).toHaveValue("su"));
  });
});

如果修改后还是不符合预期，检查Search组件自身实现：

• 确认input标签的value属性确实绑定了传入的title prop，没有在组件内部维护独立的state覆盖外部传入值
• 确认输入事件触发时，正确取到event.target.value作为参数传给onChangeHadler回调，没有取值错误

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