Como Fazer Teste Para Verificar Imagem - React Testing

Fazer um simples teste para verificar se a imagem foi renderizada ou não, no React Testing Library, é uma atividade bem simples, mas podemos acabar nos enrolando com coisa boba.

Então sem enrolação, um exemplo de teste básico:

Componente React de imagem

const Logo = ({ src }) => {

  if(!src) {
    return null
  }
  
  return (
    <img src={src} alt="Logo" className="img-logo" />
  );
};

export default Logo;

Agora vamos testar:

Caso 1 - Deve renderizar

import { render, screen } from '@testing-library/react';
import Logo from './logo';

describe('Logo', () => {
  it('should render <Cucarda>', async () => {

    const { container } = render(<Cucarda src='img.png' />);
    const cucardaImg = container.querySelector('.img-logo');
    expect(cucardaImg).not.toBeNull();
  });
});

Caso 2 - Não deve renderizar

import { render, screen } from '@testing-library/react';
import Logo from './logo';

describe('Logo', () => {
  it('should render <Cucarda>', async () => {

    const { container } = render(<Cucarda src='' />);
    const cucardaImg = container.querySelector('.img-logo');
    expect(cucardaImg).toBeNull();
  });
});

Agora é só rodar no terminal o seu comando de teste e comemorar!