App.test.tsx

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

it('renders learn react link', () => {
    render(<App />);
    const linkElement = screen.getByText(/learn react/i);
    expect(linkElement).toBeInTheDocument();
});

it('should render root div', () => {
    const { container } = render(<App />);

    const divElement = container.firstChild as HTMLDivElement;

    expect(divElement.classList.contains('App')).toBe(true);
    expect(divElement.classList.contains('App')).toBeTruthy();

    expect(divElement).toHaveClass('App');
});

it('should render header', () => {
    const { container } = render(<App />);

    // Why banner? https://www.w3.org/TR/html-aria/#docconformance
    const header = screen.getByRole('banner');

    expect(header).toBeInTheDocument();
    expect(header).toHaveClass('App-header');

    const parentDiv = container.firstChild as HTMLDivElement;
    expect(header.parentElement).toContainElement(parentDiv);

    const childImage = screen.getByRole('img');
    expect(header.firstElementChild).toContainElement(childImage);
});

it('should render image', () => {
    render(<App />);

    const img = screen.getByRole('img');
    expect(img).toBeInTheDocument();
    expect(img).toHaveClass('App-logo');
    expect(img).toHaveAttribute('src', 'logo.svg');
    expect(img).toHaveAttribute('alt', 'logo');

    const sameImage = screen.getByAltText('logo');
    expect(sameImage).toBeInTheDocument();
});