1
resposta

Erro no console ao rodar os testes feitos da aula de React Automatizando os testes

Ao rodar os testes dos exemplos feitos em sala, aparece um erro no terminal mesmo os testes passando. Eu segui todos os passos da aula, já até fiz ctrl c e ctrl v do código disponibilizado e mesmo assim aparece esse erro. Queria entender do que se trata.

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


describe('Componente principal', () => {
    describe('Quando eu abro o app do banco', () => {
        it('o nome é exibido', () => {
            render(<App />);
            expect(screen.getByText('ByteBank')).toBeInTheDocument();
        });

        it('o saldo é exibido', () => {
            render(<App />);
            expect(screen.getByText('Saldo:')).toBeInTheDocument();
        });

        it('o botão de realizar transação é exibido', () => {
            render(<App />);

            expect(screen.getByText('Realizar operação')).toBeInTheDocument();
         });
    });
    describe('Quando eu realizo uma transação', () => {
        it('que é um saque, o valor vai diminuir', () => {
            const valores = {
                transacao: 'saque',
                valor: 50
            }
            const novoSaldo = calcularNovoSaldo(valores, 150);
            expect(novoSaldo).toBe(100);
        });

        it('que é um saque, a transação deve ser realizada', () => {
            render(<App />);

            const saldo = screen.getByText('R$ 1000');
            const transacao = screen.getByLabelText('Saque');
            const valor = screen.getByTestId('valor');
            const botaoTransacao = screen.getByText('Realizar operação');

            expect(saldo.textContent).toBe('R$ 1000');

            fireEvent.click(transacao, { target: { value: 'saque' }});
            fireEvent.change(valor, { target: { value: '10' }});
            fireEvent.click(botaoTransacao);

            expect(saldo.textContent).toBe('R$ 990');
         });
    });
});

Parte do erro terminal:

● Cannot log after tests are done. Did you forget to wait for something async in your test? Attempted to log "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:14)". 38 | } 39 | > 40 | useEffect(() => { | ^ 41 | obterSaldo(); 42 | carregarTransacoes(); 43 | }, [saldo]) at BufferedConsole.error (nodemodules/@jest/console/build/BufferedConsole.js:163:10) at printWarning (nodemodules/react-dom/cjs/react-dom.development.js:88:30) at error (node_modules/react-dom/cjs/react-dom.development.js:60:5) at warnIfNotCurrentlyActingUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:23284:7) at dispatchAction (node_modules/react-dom/cjs/react-dom.development.js:15656:9) at carregarTransacoes (src/App.js:40:5)

1 resposta

Fala ai Adriane, tudo bem? Esses dias respondi uma dúvida com o mesmo problema, acho que a solução foi setar type="button" no botão do formulário (algo assim).

Espero ter ajudado.