React Testing Library中user-event 14.4.3点击事件测试失败求助

我正在测试一个简单的React计数器组件：点击按钮后计数器从0递增到1，但测试代码执行报错。以下是相关代码和配置：

计数器组件代码 #

import { useState } from "react";

export const Counter = () => {
     const [counter, setCounter] = useState(0);
     return (
        <>
          <h1>{counter}</h1>
          <button onClick={() => setCounter(count => count + 1)} >INCREMENT +</button>
        </>
     );
};

测试代码（原错误版本） #

import {render, screen} from "@testing-library/react"
import { Counter } from "./Counter";
import { user } from "@testing-library/user-event";
import "./Counter";

test("renders count of 1 when clicking on INCREMENT + button", async () => {
     user.setup()
     render(<Counter />)
     const incrBtn = screen.getByRole("button", {
          name: "INCREMENT +"
     });
     await user.click(incrBtn);
     const countElmnt = screen.getByRole("heading");
     expect(countElmnt).toHaveTextContent("1");
});

当前依赖配置 #

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

  "devDependencies": {
    "@testing-library/dom": "^9.3.1",
    "@testing-library/user-event": "^14.4.3"
  }

已尝试操作 #

执行命令安装最新测试库：

npm install --save-dev @testing-library/user-event @testing-library/dom

问题原因及修复方案 #

测试代码的核心错误在于没有正确初始化user-event实例：

@testing-library/user-event v14+版本中，setup()方法会返回一个初始化后的用户操作实例，必须使用这个实例来调用click等操作方法，而非直接使用导入的user对象。另外，测试代码中多余的import "./Counter";可以删除。

修正后的测试代码如下：

import {render, screen} from "@testing-library/react"
import { Counter } from "./Counter";
import userEvent from "@testing-library/user-event";

test("renders count of 1 when clicking on INCREMENT + button", async () => {
  // 接收setup返回的用户操作实例
  const user = userEvent.setup();
  render(<Counter />);
  
  const incrBtn = screen.getByRole("button", {
    name: "INCREMENT +"
  });
  await user.click(incrBtn);
  
  const countElmnt = screen.getByRole("heading");
  expect(countElmnt).toHaveTextContent("1");
});

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