> For the complete documentation index, see [llms.txt](https://ploegert.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ploegert.gitbook.io/til/programmy/react/test-that-element-does-not-render-in-the-component.md).

# Test That Element Does Not Render In The Component

With [`react-testing-library`](https://testing-library.com/docs/react-testing-library/intro), 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:

```javascript
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:

```javascript
  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:

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

[source](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-query-variants-for-anything-except-checking-for-non-existence)