Reactのテストでa test was not wrapped in act(...)が出た

const user = userEvent.setup();
render(<Component />);

const link = screen.getByRole("link");
await user.click(link)
expect(...)

のようなコードを書いていたらタイトルのようなWarningが出た。割とよくあることなのか解決方法も同時に出てstateを更新するイベントを発火するやつはactで囲めと書いてある。

ただ、単にactで囲んでact(async() => await user.click(link))でいけるかと思いきや解決しなかった。

を見ると、actがPromiseを返すのでこれをawaitで待ってやれば良さそうだった。つまり、

const user = userEvent.setup();
render(<Component />);

const link = screen.getByRole("link");
await act(() => user.click(link))
expect(...)

こう書くとWarningが出ずにテストが通った。

うまくいかないときにError: Not implemented: navigation (except hash changes)というエラーが出たりもして困っていたがこれも上記で同時に解決した。