App.test.tsx

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

// ... other tests

describe('diff approaches', () => {
    // helper
    function textContentMatcher(text) {
        return function (_content, node) {
            const hasText = (node) => node.textContent === text;
            const nodeHasText = hasText(node);
            const childrenDontHaveText = Array.from(node?.children || []).every(
                (child) => !hasText(child),
            );
            return nodeHasText && childrenDontHaveText;
        };
    }

    const textContent = 'Edit src/App.tsx and save to reload.';

    it('should render paragraph with text (1)', () => {
        const { container } = render(<App />);

        const p = container.getElementsByTagName(
            'p',
        )[0] as HTMLParagraphElement;

        expect(p.textContent).toEqual(textContent);
        expect(p).toHaveTextContent(textContent);
    });

    it('should render paragraph with text (2)', () => {
        render(<App />);

        expect(screen.getByRole('banner').children[1]).toHaveTextContent(
            textContent,
        );
    });

    it('should render paragraph with text (3)', () => {
        render(<App />);

        expect(screen.getByRole('img').nextElementSibling).toHaveTextContent(
            textContent,
        );
    });

    it('should render paragraph with text (4)', async () => {
        render(<App />);

        expect(
            await screen.findByText(
                textContentMatcher('Edit src/App.tsx and save to reload.'),
            ),
        ).toBeInTheDocument();
    });
});