What is the best way to test a text in a div or a p tag in react-testing-library ?

Let's pretend that we have a react ponent as such :

const Greeting = ({name}) => {
  return <div>Wele {name}!</div>
}

What would be the best way to test that the ponent renders the expected value, would it be using toBeInTheDocument() :

import {render, screen} from '@testing-library/react'
import Greeting from './greeting'

test('it renders the given name in the greeting', () => {
  render(<Greeting name="John Doe"/>)
  expect(screen.getByText(`Wele John Doe!`)).toBeInTheDocument()
})

or using toBeVisible()

import {render, screen} from '@testing-library/react'
import Greeting from './greeting'

test('it renders the given name in the greeting', () => {
  render(<Greeting name="John Doe"/>)
  expect(screen.getByText(`Wele John Doe!`)).toBeVisible()
})

or neither:

import {render, screen} from '@testing-library/react'
import Greeting from './greeting'

test('it renders the given name in the greeting', () => {
  render(<Greeting name="John Doe"/>)
  screen.getByText(`Wele John Doe!`)
})

The last one makes more sense to me as if 'Wele John Doe!' is not on the page, it will immediately fail whereas if it is on the page, the two first propositions would be equivalent to: expect(true).toBe(true)

am I missing something here?

What is the best way to test a text in a div or a p tag in react-testing-library ?

Let's pretend that we have a react ponent as such :

const Greeting = ({name}) => {
  return <div>Wele {name}!</div>
}

What would be the best way to test that the ponent renders the expected value, would it be using toBeInTheDocument() :

import {render, screen} from '@testing-library/react'
import Greeting from './greeting'

test('it renders the given name in the greeting', () => {
  render(<Greeting name="John Doe"/>)
  expect(screen.getByText(`Wele John Doe!`)).toBeInTheDocument()
})

or using toBeVisible()

import {render, screen} from '@testing-library/react'
import Greeting from './greeting'

test('it renders the given name in the greeting', () => {
  render(<Greeting name="John Doe"/>)
  expect(screen.getByText(`Wele John Doe!`)).toBeVisible()
})

or neither:

import {render, screen} from '@testing-library/react'
import Greeting from './greeting'

test('it renders the given name in the greeting', () => {
  render(<Greeting name="John Doe"/>)
  screen.getByText(`Wele John Doe!`)
})

The last one makes more sense to me as if 'Wele John Doe!' is not on the page, it will immediately fail whereas if it is on the page, the two first propositions would be equivalent to: expect(true).toBe(true)

am I missing something here?

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

Share Improve this question Follow edited Sep 27, 2023 at 8:27 YK S 3,44055 gold badges2929 silver badges5858 bronze badges asked Jan 13, 2022 at 17:28 DaikoziDaikozi 21111 gold badge44 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The difference between .toBeInTheDocument() and .toBeVisible() are explained clearly in the doc.

In short: An element can be present in the document but not visible to the user.

E.g.

import { render, screen } from '@testing-library/react';
import React from 'react';
import '@testing-library/jest-dom/extend-expect';

function Test() {
  return <div style={{ display: 'none' }}>test</div>;
}

describe('toBeVisible-VS-toBeInDocument', () => {
  test('should pass', () => {
    render(<Test />);
    expect(screen.getByText(/test/)).not.toBeVisible();
    expect(screen.getByText(/test/)).toBeInTheDocument();
  });
});

Test result:

 PASS  examples/toBeVisible-VS-toBeInDocument/index.test.tsx (8.595 s)
  toBeVisible-VS-toBeInDocument
    ✓ should pass (49 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.099 s, estimated 10 s

get* or query*?

The only reason the query* variant of the queries is exposed is for you to have a function you can call which does not throw an error if no element is found to match the query (it returns null if no element is found). The only reason this is useful is to verify that an element is not rendered to the page. The reason this is so important is because the get* and find* variants will throw an extremely helpful error if no element is found–it prints out the whole document so you can see what's rendered and maybe why your query failed to find what you were looking for. Whereas query* will only return null and the best toBeInTheDocument can do is say: "null isn't in the document" which is not very helpful.

In short: Only use the query* variants for asserting that an element cannot be found.

get* query is the best way to check if an element is present in the document.

From the Using get* variants as assertions post.

Advice: If you want to assert that something exists, make that assertion explicit.

Aside from the point in the article, I think it would be much more readable.

So:

// You can do this
screen.getByText(`Wele John Doe!`);

// better, much more readable
expect(screen.getByText(`Wele John Doe!`)).toBeInTheDocument();