如何让 React 测试库的 userEvent 输入到输入中

Question

我可以使用 React 测试库的方法成功实现测试fireEvent，但是当我尝试使用等效测试时，userEvent我无法让它触发任何内容。我怎样才能解决这个问题？

代码沙箱

/MyInput.tsx

import { useState } from "react";

export default function MyInput() {
  const [inputTextState, setInputTextState] = useState("");
  return (
    <div>
      <label>
        My Input
        <input
          value={inputTextState}
          onChange={(event) => setInputTextState(event.target.value)}
        />
      </label>
      <p>{inputTextState}</p>
    </div>
  );
}

__tests__/MyInput.test.tsx

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

const setup = () => {
  const utils = render(<MyInput />);
  const input = utils.getByLabelText("My Input") as HTMLInputElement;
  return {
    input,
    ...utils
  };
};

test("Simply input a number with fireEvent", () => {
  const { input } = setup();
  fireEvent.change(input, { target: { value: "23" } });
  expect(input.value).toBe("23");
});

test("Try userEvent", () => {
  const { input } = setup();
  userEvent.type(input, "23");
  expect(input.value).toBe("23");
});

Answer 1

只是我需要添加 async 和await：

test("Try userEvent", async () => {
  const { input } = setup();
  await userEvent.type(input, "23");
  expect(input.value).toBe("23");
});

at没有返回承诺，但 update 却返回@testing-library/user-event了。目前，提供了，因此与最新文档不匹配。对于不熟悉的人来说相当混乱！v13v14create-react-appv13