jest-dom: Property 'toBeInTheDocument' does not exist on type 'JestMatchers'

I’ve come across the issue you’re experiencing and I believe I have a solution that might help you.

If you add the following line to your tsconfig.json under compilerOptions:

{
  "compilerOptions": {
    // ... other options
    "types": ["@testing-library/jest-dom"],
    // ... other options
  }
}

This will inform TypeScript to include the type definitions from @testing-library/jest-dom, which should resolve the type errors you’re seeing.

For me the following seems to be solving the issue: setupAfterEnv.ts

import '@testing-library/jest-dom/jest-globals';
import '@testing-library/jest-dom';

Update:

Eh maybe it is flaky because after a couple of TS server restarts now it does not work … Anyway maybe this is not the correct solution then.

since this is one of the main google hits, I thought I’d share what the solution is. There are two problems: 1. jest-dom 5.x doesn’t have TS types and 2. expect needs to be extended.

First, we’ll uninstall jest-dom and install a 4.x version:

yarn remove @testing-library/jest-dom
yarn add -D @testing-library/jest-dom@^4.2.4

You can use the analogous npm commands instead of yarn.

Then, add this to src/setupTests.ts:

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

Doing these two things alone worked for me.

BTW, I stumbled upon this while following a tutorial that was based off of create-react-app, using the command yarn create react-app myname --template typescript.

import '@testing-library/jest-dom'; is the only thing working for me, but I have to do it in every test file 👎

in my case replacing import with require helped (all other fixes suggested above were already implemented and didn’t help) const { expect, describe, it } = require('@jest/globals');

That works for me

1. Create/update jest.setup.ts:

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

2. Update jest.config.ts:

   // ...other configs
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   

3. Add type definitions in tsconfig.json:

   "compilerOptions": {
      ...
      "types": ["@testing-library/jest-dom"],
      ...
   }
   

The comment above by @Noyabronok has pointed me in the right direction. Thanks.

I had "src/**/*.test.tsx" in the "exclude" array in my tsconfig.json for some reason 🤦 .

Removing this seems to have resolved the issue in VS Code for me now.

As this is still alive at this date i have to say what just worked for me right now. I updated @testing-library/jest-dom to the latest and in the jest setup file instead of importing it as import '@testing-library/jest-dom/extend-expect';, I imported it now as this import '@testing-library/jest-dom/jest-globals';

The way i use the jest functions in typescript is doing explicit imports like import { describe, expect, test } from '@jest/globals'; from the also required package @jest/globals

https://jestjs.io/docs/getting-started#type-definitions https://github.com/testing-library/jest-dom/releases/tag/v6.0.0

i couldn’t get it working with @types/jest but i dont care about it, i rather use @jest/globals.

in my case replacing import with require helped (all other fixes suggested above were already implemented and didn’t help) const { expect, describe, it } = require('@jest/globals');

Thanks bro it worked, none of the solutions were working

Adding compilerOptions: { "types": ["@testing-library/jest-dom"] } in tsconfig.json didn’t work for me because it overrides my existing "typeRoots".

The only solution I’ve found is adding import "@testing-library/jest-dom"; to every test file, which is a bummer.

Update: I was able to resolve this!

If, like me, you are configuring typeRoots in tsconfig.json and the above solution using the types property doesn’t work for you, you can instead update typeRoots:

"typeRoots": ["node_modules/@types", "node_modules/@testing-library"]

Better is just point ts compiler to setupTests.ts file with import to @testing-library/jest-dom by adding it to tsconfig.json include option.

checkout this comment https://github.com/nrwl/nx/issues/9140#issuecomment-1200073153 btw there is no need to install @types/testing-library__jest-dom in first step

Woohoo, I got the compilerOptions: { "types": ["@testing-library/jest-dom"] } in tsconfig.json change working!

tsconfig file needed the following change:

from:

  "include": [
    "./src/**.*",
  ],

to:

  "include": [
    "./src/**/**.*",
  ],

Appears that only files at the root or src directory were having tsconfig changes applied.

This took care of VSCode error. Unfortunately I still needed import '@testing-library/jest-dom' in my jest-setup.tsx file to remove the error from test runs

I just downgraded from jest-dom 6.x to 5.x and everything is green again.

So I have this import inside of my setupTests.ts:

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

And when I have the setupTests.ts files actually open in my IDE, it’s all good. No complaints. Now when I close the setupTests.ts file, my IDE starts complaining that inTheDocument() doesn’t exist on JestMatchers… And then when I open setupTests.ts again, it’s all good and dandy. Anybody else had this problem?

The only solution that as work with me (I’m using Nextjs 14.0.3) is to modify the tsconfig.json and add: "types": ["@testing-library/jest- to compilerOptions

That’s pretty good. It has to be added to the config file after installing the library.