Oii Natalia, tudo bem?
A mensagem que você está vendo é um aviso (não um erro) indicando que a atualização do estado não está sendo feita dentro de uma função act(). Todas as atualizações de estado devem acontecer dentro de uma função act() para que o ambiente de testes possa acompanhar todas as atualizações que estão acontecendo e atualizar a UI de acordo.
No seu caso, parece que a atualização do estado não está sendo envolvida por uma função act(). Isso pode acontecer quando você está testando componentes que fazem atualizações de estado em resposta a mudanças no ambiente (como mudanças de rota no BrowserRouter).
Para resolver isso, você pode envolver a parte do seu código de teste que está causando a atualização do estado em uma função act().
Exemplo:
// importações
describe('Componente <App/>', () => {
test('Deve navegar até a página correspondente ao link clicado', async () => {
render(<AppRoutes />, { wrapper: BrowserRouter });
const linkPaginaCartoes = screen.getByText('Cartões');
expect(linkPaginaCartoes).toBeInTheDocument();
await act(async () => {
userEvent.click(linkPaginaCartoes);
});
const tituloPaginaCartoes = await screen.findByText('Meus cartões');
expect(tituloPaginaCartoes).toBeInTheDocument();
});
});
Desse modo, a chamada para userEvent.click(linkPaginaCartoes); foi envolvida em uma função act(). Isso garante que todas as atualizações de estado que acontecem como resultado desse clique sejam rastreadas pelo React.
O act() pode ser usado tanto de forma síncrona quanto assíncrona. No caso de atualizações de estado que acontecem assincronamente (como no seu caso, onde a atualização do estado acontece em resposta a um clique), você deve usar a forma assíncrona de act() como mostrado no exemplo acima.
Um abraço e bons estudos.
