Erro ao executar o teste 'Que é um saque, a transacao deve ser realizada' | React: automatizando os testes em aplicações front-end

Tenho pego esse erro no teste 'Que é um saque, a transacao deve ser realizada'. Alguém pode ajudar?

PASS src/App.test.js ● Console

console.error node_modules/react-dom/cjs/react-dom.development.js:88
  Warning: An update to App inside a test was not wrapped in act(...).

  When testing, code that causes React state updates should be wrapped into act(...):

  act(() => {
    /* fire events that update state */
  });
  /* assert on the output */

  This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
      in App (at App.test.js:9)
console.error node_modules/react-dom/cjs/react-dom.development.js:88
  Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
      in App (at App.test.js:9)

Oi Michaela, tudo bem?

Desculpe a demora em retornar.

Primeiramente, é importante entender que o erro que você está enfrentando está relacionado ao fato de que um componente React foi atualizado durante um teste sem estar devidamente envolvido no método "act". Isso pode causar resultados inesperados nos testes e fazer com que eles não reflitam o comportamento real da aplicação.

Para corrigir esse erro, você precisa envolver a função que atualiza o estado do componente com o método "act". O método "act" é um utilitário que garante que as atualizações de estado ocorram de maneira síncrona, para que os testes possam verificar com precisão o comportamento do componente. Veja um exemplo de como fazer isso:

test('Que é um saque, a transação deve ser realizada', () => {
  act(() => {
    render(<App />);
  });
  const inputElement = screen.getByPlaceholderText('Valor');
  userEvent.type(inputElement, '10');
  const buttonElement = screen.getByText('Realizar saque');
  userEvent.click(buttonElement);
  expect(screen.getByText('Saldo: R$90')).toBeInTheDocument();
});

Além disso, você também está recebendo um aviso que indica que uma atualização de estado foi realizada em um componente que já foi desmontado. Isso pode causar vazamentos de memória e outros problemas. Para corrigir esse erro, você precisa cancelar todas as assinaturas e tarefas assíncronas em um método "useEffect" de limpeza. Veja um exemplo de como fazer isso:

useEffect(() => {
  const subscription = subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, []);

O código acima garante que a assinatura seja cancelada quando o componente for desmontado. Note que o array vazio passado como segundo parâmetro do useEffect garante que a limpeza seja realizada apenas uma vez, na montagem do componente.

Espero que essas dicas te ajudem a resolver o erro que você está enfrentando.

Um abraço e bons estudos.