react-testing-library why is toBeInTheDocument() not a function

Question

Here is my code for a tooltip that toggles the CSS property display: block on MouseOver and on Mouse Out display: none.

 it(\'should sho         


        

Answer 1

When you do npm i @testing-library/react make sure there is a setupTests.js file with the following statement in it

import '@testing-library/jest-dom/extend-expect';

Answer 2

As mentioned by Giorgio, you need to install jest-dom. Here is what worked for me:

(I was using typescript)

npm i --save-dev @testing-library/jest-dom

Then add an import to your setupTests.ts

import '@testing-library/jest-dom/extend-expect';

Then in your jest.config.js you can load it via:

"setupFilesAfterEnv": [
    "<rootDir>/src/setuptests.ts"
  ]

Answer 3

toBeInTheDocument is not part of RTL. You need to install jest-dom to enable it.

Answer 4

If you don't already have jest-dom installed, you need to install it using the command below.

npm i --save-dev @testing-library/jest-dom

create a file in the root of your project folder and name it jest-setup.js. Your file should have the following content.

import "@testing-library/jest-dom/extend-expect";

In your package.json, add the code below to your jest config;

"jest": {
    "setupFilesAfterEnv": ["<rootDir>/jest-setup.js"]
}

Answer 5

Instead of doing:

    expect(queryByText('test')).toBeInTheDocument()

you can find and test that it is in the document with just one line by using

    let element = getByText('test');

The test will fail if the element isn't found with the getBy call.