为什么状态更改不调用 react act() 错误？

Question

大多数人都在寻找如何摆脱测试中的 React act() 错误。我想知道相反的情况。我有引起状态变化的代码。该状态更改应触发重新渲染反应（并且确实如此）。但是，我没有 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 只有在使用作为已解决承诺的结果运行的异步代码时才需要，例如，在进行 API 调用时。

这意味着您甚至不需要 await 来更改测试中的输入。下面的测试也会通过。

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();
});

为什么状态更改不调用 react act() 错误？

Why is a state change not invoking a react act() error?

javascript

reactjs

react-testing-library

testing-library