I'm trying to test my ponent if it displays the right value in my h1.

Below is my ponent that will be tested.

  const Title = () => {
  return (
    <>
      <h1 aria-label='Title of the project'>MY RTL PROJECT</h1>
    </>
  );
};

export default Title;

and here is my test file that tries to check if my ponent displays "MY RTL PROJECT".

import { render, } from '@testing-library/react';
import Title from '../Title';


    describe('Checks the title ponent', () => {
    
        it('checks the value of the Title ponent', () => {
            const { getByText } = render(<Title />);
            const titleValue = getByText('MY RTL PROJECT')
            expect(titleValue).toBe('MY RTL PROJECT')
        })
    })

and here is the error: "messageParent" can only be used inside a worker

  ● Checks the title ponent › checks the value of the Title ponent

expect(received).toBe(expected) // Object.is equality

Expected: "MY RTL PROJECT"
Received: <h1 aria-label="Title of the project">MY RTL PROJECT</h1>

I'm trying to test my ponent if it displays the right value in my h1.

Below is my ponent that will be tested.

  const Title = () => {
  return (
    <>
      <h1 aria-label='Title of the project'>MY RTL PROJECT</h1>
    </>
  );
};

export default Title;

and here is my test file that tries to check if my ponent displays "MY RTL PROJECT".

import { render, } from '@testing-library/react';
import Title from '../Title';


    describe('Checks the title ponent', () => {
    
        it('checks the value of the Title ponent', () => {
            const { getByText } = render(<Title />);
            const titleValue = getByText('MY RTL PROJECT')
            expect(titleValue).toBe('MY RTL PROJECT')
        })
    })

and here is the error: "messageParent" can only be used inside a worker

  ● Checks the title ponent › checks the value of the Title ponent

expect(received).toBe(expected) // Object.is equality

Expected: "MY RTL PROJECT"
Received: <h1 aria-label="Title of the project">MY RTL PROJECT</h1>

• javascript
• reactjs
• jestjs
• react-testing-library

• Show the full error stack. – Lin Du Commented May 21, 2021 at 4:26

5 Answers 5

The question is pretty old, but I figured that for anyone ing here a cleaner solution would be:

screen.getByRole('heading', {level: 1})

The level property can go 1 to 6 and is needed to specify the level of heading you're aiming to retrieve. So level 1 would be h1, level 2 h2 and so on

This line:

const titleValue = getByText('MY RTL PROJECT')

...is returning you an element, not the text the element contains. So instead of this line:

expect(titleValue).toBe('MY RTL PROJECT')

...you might want to use jest-dom toHaveTextContent():

expect(titleValue).toHaveTextContent('MY RTL PROJECT')

That said-- you are getting an element by text, then verifying it contains the text you just used to query it, so that test might not be of very high value. It might make more sense to just verify that it is there:

const titleValue = getByText('MY RTL PROJECT')
expect(titleValue).toBeInTheDocument();

...which is also from jest-dom.

Also, although I cannot say with certainty, the usage of aria-label to apply text to your heading that is different than the text the heading contains seems dubious to me-- you might want to verify that that doesn't represent an accessibility anti-pattern.

I suggest to use getByRole() or queryByRole(), that way you don't even have to specify the text,...

    const titleValue = screen.getByRole('heading');
    expect(titleValue).toBeInTheDocument();
    expect(titleValue).toHaveTextContent(/my rtl project/i);

... although you can specify text, if you want to:

    const titleValue = screen.getByRole('heading', { name: /my rtl/i });

More information about *ByRole functions: https://testing-library./docs/queries/byrole/

let wrapper = container.querySelector('h1');

expect(wrapper?.textContent).toEqual('MY RTL PROJECT');

   expect(
  screen.getByRole('heading', { level: 2, name: 'text of the heading' })
).toBeVisible();