Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[App.test.js] Warnings: Not wrapped in act() / Can't perform a React state update on an unmounted component.

Ninguém mais se incomoda com esses warnings no console? Tentei resolver de diversas formas, a mensagem de erro aponta até para a async function obterSaldo(). Sei que um warning não é um error, mas fico incomodado. Tentando desde ontem resolver. E não tentei nada novo, nem estou falando do desafio, que correu tudo bem. O problema é apontado no App.test.js. Segue a mensagem de erro:

Attempted to log "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:8)".

      26 |   async function obterSaldo() {
      27 |     atualizarSaldo(await api.buscaSaldo());
    > 28 |   }
         |    ^
      29 |
      30 |   function realizarTransacao(valores) {  
      31 |     const novoSaldo = calcularNovoSaldo(valores, saldo);

Depois deste trecho, segue a lista de arquivos da node_modules, que acredito que não seja preciso eu enviar. Já tentei mockar outras funções, já tentei até atualizar a testing-lib... Meus testes estão exatamente como os da aula:

import { render, screen } from "@testing-library/react";
import React from "react";
import App, { calcularNovoSaldo } from "./App";

describe("<App />", () => {
  describe("should render at start", () => {
    it("the bank name", () => {
      render(<App />);
      expect(screen.getByText("ByteBank")).toBeInTheDocument();
    });
    it("account balance", () => {
      render(<App />);
      expect(screen.getByText("Saldo:")).toBeInTheDocument();
    });
    it("transaction button", () => {
      render(<App />);
      expect(
        screen.getByRole("button", { name: /realizar operação/i })
      ).toBeInTheDocument();
    });
  });

  describe("when a transaction is made", () => {
    it("should subtract the withdraw from balance", () => {
      const valores = {
        transacao: "saque",
        valor: 50,
      };
      const novoSaldo = calcularNovoSaldo(valores, 150);
      expect(novoSaldo).toBe(100);
    });
    it("should add the deposit to the balance", () => {
      const valores = {
        transacao: "deposito",
        valor: 50,
      };
      const novoSaldo = calcularNovoSaldo(valores, 150);
      expect(novoSaldo).toBe(200);
    });
  });
});

Eu vi este mesmo warning no trabalho, e ainda não sei como resolver de forma mais objetiva. Em alguns casos, mocks de funções resolveram, mas não é uma receita pronta. Alguém mais vendo esses warnings por aí ?

2 respostas
solução!

Resolvido, instalando específicamente a versão 12 da testing-library/react.

npm install @testing-library/react@12

ou

yarn add @testing-library/react@12

Vi a solução nesta thread do fórum. Já havia tentado atualizar para outras versões, mas esta específicamente, cessou o problema, pelo menos para App.test.tsx, até o momento da aula 3.4 React Testing Library.

Confesso que demorei a notar que o conteúdo tá um pouco desatualizado, usando fireEvent, eu estou usando o userEvent.

Vou deixar em aberto ainda a conversa aqui, caso alguém queira somar algum relato ou dúvida sobre o mesmo assunto.

Oi Wagner, tudo bem?

Muito obrigada por compartilhar com a gente a sua solução e parabéns por ir além e tentar encontrar uma solução para o que estava te incomodando.

Esse curso está sendo estudado pelas pessoas responsáveis exatamente por se encontrar um pouco desatualizado.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software