I have a component library that I'm writing unit tests for using Jest and react-testing-library. Based on certain props or events I want to verify that certain elements aren't being rendered.
getByText
, getByTestId
, etc throw and error in react-testing-library
if the element isn't found causing the test to fail before the expect
function fires.
How do you test for something not existing in jest using react-testing-library?
From DOM Testing-library Docs - Appearance and Disappearance
Asserting elements are not present
The standard
getBy
methods throw an error when they can't find an element, so if you want to make an assertion that an element is not present in the DOM, you can usequeryBy
APIs instead:const submitButton = screen.queryByText('submit') expect(submitButton).toBeNull() // it doesn't exist
The
queryAll
APIs version return an array of matching nodes. The length of the array can be useful for assertions after elements are added or removed from the DOM.const submitButtons = screen.queryAllByText('submit') expect(submitButtons).toHaveLength(2) // expect 2 elements
not.toBeInTheDocument
The
jest-dom
utility library provides the.toBeInTheDocument()
matcher, which can be used to assert that an element is in the body of the document, or not. This can be more meaningful than asserting a query result isnull
.import '@testing-library/jest-dom/extend-expect' // use `queryBy` to avoid throwing an error with `getBy` const submitButton = screen.queryByText('submit') expect(submitButton).not.toBeInTheDocument()