Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'

[khairalanam]

• @testing-library/jest-dom version: 6.1.4
• node version: 18.17.1
• jest version: 29.7.0
• npm version: 10.2.0

Other dependencies:

Relevant code or config:

import { render, screen } from "@testing-library/react";
import Home from "@/app/page";

it("should have Docs text", () => {
  render(<Home />);

  const myElement = screen.getByText("Docs");

  expect(myElement).toBeInTheDocument();
});

What you did:

I was following a Next.js Testing tutorial by Dave Gray to learn more about React Testing. I followed the tutorial until the 17-minute mark where the error occurred.

What happened:

This is the error:

Reproduction:

The steps from the beginning until the 17th-minute mark of the tutorial will give the error.

Problem description:

Property 'toBeInTheDocument' does not exist on type 'JestMatchers'. It seems that it has something to do either with TypeScript, or the Nextjs 14, or with the latest release of testing-library/jest-dom

Suggested solution:

The only solution, which seems temporary, is to roll back to an older version like 5.16.5 or 5.17. This solves the problem.

[fattila16]

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.

[khairalanam]

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

[Dyn4sty]

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.

[khairalanam]

This too seems solid but much cleaner. Nice!

[42x42x42]

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');

[wslp12]

pnpm install --save-dev "@types/jest"
i just do install types library it work for me
not any config file edit

[AshfaqKabir]

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

[chrisrhymes]

I have tried adding the import '@testing-library/jest-dom/jest-globals'; to the jest.setup.ts file and adding the types to the tsconfig.json file as detailed above, but I still get the type errors showing in VS Code.

Strangely, when I open the jest.setup.ts file in VS Code, the type errors suddenly disappear and everything works as expected? Am I missing a step from my configuration?

[Noyabronok]

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

[LeeBingler]

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

[Noyabronok]

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

[chrisrhymes]

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.