How to test specific elements of a Create-React-App (in TypeScript) with react testing library

Question

I generated a project using create-react-app with the --typescript option.

This is my app:

import React from 'react';

const App: React.FC = () => {
  return (
    <div className="App">
        <div>
            <h1 id="pageHeader">Home page</h1>
            <p>This is the Home page</p>
        </div>
    </div>
  );
};

export default App;

My current test is:

import React from 'react';
import ReactDOM from 'react-dom';
import {render} from '@testing-library/react';
import "@testing-library/jest-dom/extend-expect";
import App from './App';

test('Verify page header', () => {
    const {getByText} = render(<App/>);
    expect(getByText('Home page')).toBeInTheDocument;
});

The question: I want to test a little more. Besides testing if "Home page" occurs anywhere in my page, I want to make sure that the text "Home Page" is located in the h1 element. How do I get the full element (preferably via getElementById) from the react-testing-library so I can do assertions on it with Jest?

helloitsjoe · Accepted Answer · 2019-12-09 01:01:00Z

2

A couple of points, based on your own answer:

You should avoid any logic branches in tests. Logic in tests can lead to flaky tests, since the logic in the test isn't tested. In your case, the if blocks are unnecessary, since the test will already fail if the text content doesn't exist.
There are a couple of simple ways to test that the text "Home Page" is in the h1:

Find the text and expect the element to be h1:

test('Verify page header', () => {
    const {getByText} = render(<App/>);
    expect(getByText('Home page').tagName).toBe('H1');
});

Or give the h1 a data-testid and use getByTestId:

<h1 data-testid="pageHeader">Home Page</h1> // <-- In your component

test('Verify page header', () => {
    const {getByTestId} = render(<App/>);
    expect(getByTestId('pageHeader').textContent).toBe('Home Page');
});

answered Dec 9, 2019 at 1:01

helloitsjoe

6,5393 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leejjon Over a year ago

Do you know why there is a method for getByTestId but not for getById? I was looking on the internet for a reason but I don't understand why we simply can't use the id. Adding data-testid's to code just for tests feels weird.

helloitsjoe Over a year ago

I don't have a great explanation for you, but the react-testing-library author has some thoughts about using id vs data-testid in this thread: github.com/testing-library/react-testing-library/issues/183 He also links to a blog article: kentcdodds.com/blog/making-your-ui-tests-resilient-to-change

Leejjon · Accepted Answer · 2019-12-09 23:18:51Z

I managed to solve it like this:

test('Verify page header', () => {
    const {container} = render(<App/>);
    const pageHeaderElement = container.querySelector('#pageHeader');
    if (pageHeaderElement) {
        const pageHeaderElementContent = pageHeaderElement.firstChild;
        if (pageHeaderElementContent) {
            // You can either do:
            expect(pageHeaderElementContent.textContent).toMatch('Home page');
            // Or:
            expect(pageHeaderElementContent).toMatchInlineSnapshot('Home page');
        } else {
            fail('Should have existed.');
        }
    } else {
        fail('Should have existed.');
    }
});

I found out about this toMatchInlineSnapshot method in the documentation of react-testing library: https://testing-library.com/docs/react-testing-library/api#render

Shorter version with the new TypeScript optional chaining:

test('Verify page header', () => {
    const {container} = render(<App/>);
    const pageHeaderContent = container.querySelector("#pageHeader")?.firstChild?.textContent;
    expect(pageHeaderContent).toMatch('Home page');
});

Collectives™ on Stack Overflow

How to test specific elements of a Create-React-App (in TypeScript) with react testing library

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related