javascript - 为什么状态更改不会调用 React act() 错误？

Question

大多数人都在寻找如何消除测试中的 React act() 错误。我想知道相反的情况。我有引起状态变化的代码。该状态更改应该触发 react 中的重新渲染(并且确实如此)。但是，我没有 act() 包装该状态更改，并且没有发出 act() 错误。这是为什么？

考虑以下愚蠢的组件:

export function SweetTextboxBro() {
  const [text, setText] = React.useState("");
  return (
    <>
      <input
        type="text"
        role="input"
        name="sweetbox"
        onChange={(evt) => {
          setText(evt.currentTarget.value);
        }}
        value={text}
      />
      <p>{text}</p>
    </>
  );
}

现在，考虑这个最小的测试:

import * as React from "react";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { SweetTextboxBro } from "../SweetTextboxBro";
import { sleep } from "../timing";

test("it emits act errors", async () => {
  render(<SweetTextboxBro />); // should internally call act()
  const textbox = screen.getByRole("input");
  const input = "weeee";
  // begin state change!
  userEvent.type(textbox, input);
  await sleep(200);
  // state updated! the DOM  has changed! but no act() error... is emitted
  expect(await screen.findByText(input)).toBeInTheDocument();
});

当 React 在 act() 调用之外重新渲染内容时，会发生 Act 错误。我不清楚为什么这个案例不适用。

Answer 1

React 测试库将 fireEvent 和 userEvent 包装在对 act 内部的调用中。此外，React 会自动处理点击事件生成的状态更改，这意味着它们首先不会触发 act 警告。

act 仅当使用作为已解决的 Promise 的结果运行的异步代码时才需要，例如，在进行 API 调用时。

这意味着您甚至不需要等待测试中的输入发生更改。以下测试也将通过。

test("it emits act errors", () => {
  render(<SweetTextboxBro />); // should internally call act()
  const textbox = screen.getByRole("input");
  const input = "weeee";
  userEvent.type(textbox, input);
  expect(screen.getByText(input)).toBeInTheDocument();
});