A simple image test in React

There isn't much to test in images, when I write a test for an image element (img) in React apps, I just check if img element exists and if img src and its alt is correct.

Here is how.

Logo

import { FunctionComponent } from 'react';

const Logo: FunctionComponent = () => {
  return (
    <img src="/logo.svg" alt="Logo"  />
  );
};

export default Logo;

Logo.test

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

describe('Logo', () => {
  test('Logo must have src = "/logo.svg" and alt = "Logo"', () => {
    render(<Logo/>);
    const logo = screen.getByRole('img');
    expect(logo).toHaveAttribute('src', '/logo.svg');
    expect(logo).toHaveAttribute('alt', 'Logo');
  });
});

Then run yarn test or npm run test
Results of your tests will be displayed on console

Happy Hacking!

Comments

[iddimsangi]

Thanks so much, its very clear and helpful

[Harrison Ekpobimi]

nice

[Ítalo Santana]

Thank you so much!!!!!!

[Jack]

very helpful thank you!

[Olzhas]

thanks man a lot

[Bernardo Gomes]

Good tip !! Thanks for sharing !!

[Karthik BT]

Very simple and clear

[Adel Mohamed Tadjerouni]

we can add another expect with toBevisible()
thanks