React Testing Library测试按回车清空聊天输入框失败问题排查

我实现了一个聊天输入框，当按下Enter键（未按住Shift键）时会清空输入内容，该功能在正常运行时表现符合预期，但使用React Testing Library（RTL）编写的测试用例未触发清空逻辑，测试结果显示输入框内容为“hellohello”。

组件代码 #

import React, { useState } from "react";

export default function Test() {
  const [chatText, setChatText] = useState("");

  function sendChat() {
    setChatText("");
  }

  return (
    <div>
      <textarea
        rows={2}
        value={chatText}
        onChange={(e) => {
          setChatText(e.target.value);
        }}
        onKeyDown={(e) => {
          if (e.key === "Enter" && !e.shiftKey) {
            e.stopPropagation();
            e.preventDefault();
            sendChat();
          }
        }}
        aria-label="chat-input"
      />
      <button onClick={sendChat}>Send</button>
    </div>
  );
}

测试用例代码 #

import React from "react";
import { render, screen, waitFor, act } from "@testing-library/react";
import "@testing-library/jest-dom";
import user from "@testing-library/user-event";

import Test from "./index";

describe("Chat", () => {
  test("clear text on Enter", async () => {
    render(<Test />);
    let textBox = screen.getByLabelText("chat-input");
    await act(async () => {
      textBox.focus();
      expect(textBox).toHaveFocus();
      await user.keyboard("hello");
      await user.keyboard("{Enter}");
      await user.keyboard("hello");
      await waitFor(() => {
        expect(textBox).toHaveValue("hello");
      });
    });
  });
});

问题分析与修复 #

组件代码逻辑没问题，问题出在测试用例的写法上：

1. 不必要的act包裹：RTL的user-event库所有异步方法（比如keyboard）已经内部自动处理了act，手动包裹反而会干扰状态更新的时机，导致后续断言无法正确捕获状态变化。

2. 断言时机与步骤拆分问题：原测试把所有操作堆在一起，没有分步验证，很难定位哪一步出问题。应该拆分操作，每一步后验证结果，确保Enter键的清空逻辑确实触发。

修改后的测试用例如下：

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

import Test from "./index";

describe("Chat", () => {
  test("clear text on Enter", async () => {
    const userEvent = user.setup(); // 推荐用setup方法创建user实例
    render(<Test />);
    const textBox = screen.getByLabelText("chat-input");

    // 聚焦输入框
    await userEvent.click(textBox);
    expect(textBox).toHaveFocus();

    // 输入hello
    await userEvent.keyboard("hello");
    expect(textBox).toHaveValue("hello");

    // 按下Enter键
    await userEvent.keyboard("{Enter}");
    expect(textBox).toHaveValue(""); // 验证清空

    // 再次输入hello
    await userEvent.keyboard("hello");
    expect(textBox).toHaveValue("hello"); // 最终验证结果
  });
});

关键修改点： #

• 使用user.setup()创建user实例，这是RTL user-event v14+的推荐用法，API更规范。
• 去掉手动的act和waitFor，因为user-event的异步操作会等待状态更新完成，直接断言即可。
• 拆分每一步操作并添加对应断言，清晰验证每一个阶段的结果，确保Enter键的清空逻辑被正确触发。

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