问题描述
大多数人都在寻找如何摆脱测试中的 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();
});