test-that-element-does-not-render-in-the-component.md

Test That Element Does Not Render In The Component

With react-testing-library, you can render a component and make assertions about the different parts of the component that get rendered.

You can also make assertions that certain things don't get rendered. To do that, first render the component:

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

import MyComponent from '../MyComponent'

test('renders component without Click Me button', () => {
  render(<MyComponent />)
})

Then add a not expectation with a query*-style matcher:

  expect(screen.queryByText('Click Me')).not.toBeInTheDocument()

You'll get an immediate test failure if you try to directly select for the element using a get*-style matcher:

  // ❌ will fail on `getByText` before the rest of the
  // assertion can be evaluated.
  expect(screen.getByText('Click Me')).not.toBeInTheDocument()

source