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

如何解决为什么状态更改不会调用 react act() 错误？

大多数人都在寻找如何摆脱测试中的 react gitlab.foo.com:81 错误。我想知道相反。我有引起状态变化的代码。该状态更改应触发重新渲染反应（确实如此）。但是，我没有 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>
    </>
  );
}

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

解决方法

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

act 应该只在使用作为已解析 promise 的结果运行的异步代码时才需要，例如，在进行 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();
});