1
resposta

[Dúvida] Failed no teste

Quando aplico este teste:

import { render, screen } from "@testing-library/react";
import Extrato from "./index";

test("Deve renderizar uma lista de transações", () => {
  const transacoes = [
    {
      transacao: "Depósito",
      valor: 100,
    },
  ];
  render(<Extrato transacoes={transacoes} />);
  const lista = screen.getByRole("listitem");
  expect(lista).toBeInTheDocument();
});

Ele continua dando failed. A mensagem do terminal é a seguinte:

● Deve renderizar uma lista de transações
                                                                                                                 
    TypeError: Cannot read properties of undefined (reading 'mes')                                               
                                                                                                                 
      4 |   return (                                                                                             
      5 |     <li>                                                                                               
    > 6 |       <p className={estilos.mes}>{transacao.mes}</p>
        |                             ^
      7 |       <div className={estilos.transacao}>
      8 |         <p data-testid="tipoTransacao">{transacao.transacao}</p>
      9 |         <span>{transacao.data}</span>
      
      Test Suites: 1 failed, 3 passed, 4 total
Tests:       1 failed, 8 passed, 9 total
Snapshots:   1 passed, 1 total
Time:        7.687 s

Onde está o erro?

1 resposta

Olá, Rafaela!

O erro está acontecendo no teste do componente de Transações. Este componente de Transações além de receber as transaçoes precisa receber os estilos. Note que no erro que você compartilhou está uma setinha abaixo do mes no classname, onde tem estilos.mes. Isso indica que o erro está acontecendo no componente de Transacoes onde o React não está identificando os estilos.

Verifiqueo arquivo Transacoes.test.js e veja se o componente de transações está direitinho, assim:

<Transacoes estilos={estilos} transacao={transacao} />

Isso deve resolver o problema.

Espero que isso ajude! Se tiver mais alguma dúvida, é só me dizer. Bons estudos!