Property 'toBeChecked' does not exist on type 'Matchers<void, Element>'

[FedeTommi]

• @testing-library/jest-dom version: 5.16.2
• node version: v14.17.4
• npm (or yarn) version: 6.14.14

• dom-testing-library version: (if applicable)
• react-testing-library version: 12.1.3

Relevant code or config:

expect(document.querySelector('input')).toBeChecked()

What you did:

Trying to test if an input is checked

What happened:

Typescript shows the error Property 'toBeChecked' does not exist on type 'Matchers<void, Element>' although the test runs correctly.

What I have tried:

• I have tried import "jest-dom/extend-expect"; and `import '@testing-library/jest-dom/extend-expect'; as recommended here
• Adding ["jest-styled-components", "@types/testing-library__jest-dom"] to the types in tsconfig
• Adding import '@testing-library/jest-dom/extend-expect'; to src/setupTests.ts
• Replacing document.querySelector('input') with document.querySelector('input')! or document.querySelector('input') as HTMLInputElement

No matter what I do, I always get the same or a similar issue

[gnapse]

• Does this happen only with the toBeChecked matcher? Or with any matcher?
• I strongly recommend that you provide a sample repo where the problem occurs. Otherwise, without access to where it is happening, we are in an even worse position than you to investigate.

[vitalybaev]

@gnapse IDK whether it's related, but I face a similar issue. I created a demo repo here.

[SaiRS]

npm install --save-dev @types/testing-library__jest-dom solved my problem

[grug]

npm install --save-dev @types/testing-library__jest-dom solved my problem

How come this is needed?

[octant]

Two things fixed my issue:

1. Installing @types/testing-library__jest-dom
2. Adding import '@testing-library/jest-dom/extend-expect'; to my jest setup file

Note: either of those solutions worked on their own. I did not need to combine them.

@gnapse I also got this error when using the toBeInTheDocument matcher.

@testing-library/angular version 10.11.1 @testing-library/jest-dom version 5.16.4 node version 14.19.3 npm version 6.14.17

[octant]

As a follow up to my previous comment, this package is very unstable when using jest-cucumber. Neither of the solutions I previously posted work to allow the matchers to be found consistently. There appears to be some sort of race condition as the matchers are sometimes found. Hopefully this information helps as it would be great to use these matchers, but as it stands this package is unusable in my project.

[tmkkz]

I have same error.

error TS2339: Property 'toBeInTheDocument' does not exist on type 'Matchers<void, HTMLElement> & SnapshotMatchers<void, HTMLElement> & Inverse<JestMatchers<void, HTMLElement>> & PromiseMatchers<...>'.

"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@types/jest": "^29.1.1",
"@types/testing-library__jest-dom": "^5.14.5",
"@types/testing-library__react": "^10.2.0",
"eslint-plugin-jest": "^27.0.4",
"eslint-plugin-jest-dom": "^4.0.2",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-testing-library": "^5.7.0",
"jest": "^29.1.1",
"jest-environment-jsdom": "^29.1.1",

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react-jsx",
    "typeRoots": ["types"],
    "types": ["jest", "node", "@testing-library/jest-dom"]
  },
  "include": ["src", "jest-setup.ts"],
  "exclude": ["node_modules"]
}

jest.config.js

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom',
  // roots: ['<rootDir>/test'],
  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
};

jest-setup.ts

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

[PaulHaze]

I am also getting similar errors. Have tried pretty much all the things mentioned above. I am using Next JS.

So far I've:

• Installed all the various libraries AND their related types

    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@types/jest": "^29.2.0",
    "@types/node": "^18.11.8",
    "@types/react": "^18.0.24",
    "@types/testing-library__jest-dom": "^5.14.5",

• I've added import '@testing-library/jest-dom/extend-expect'; to my jest.setup.ts
• I've imported that into my jest.config as well as trying to import it directly into the tests themselves.
• I've added the following the types array in tsconfig

      "jest",
      "@testing-library/jest-dom",
      "@types/testing-library__jest-dom"

• I've added "jest-setup.ts" to the include array in tsconfig.

But nothing so far is getting rid of the errors. The tests all work fine, so for now I have found the easiest solution for now is just to add "**/*.test.tsx" the my exclude array in tsconfig - which is obviously FAR from an serious solution.

Here is what a typical test looks like:

import { render, screen } from '@testing-library/react';

import { Header } from '../Header';

test('renders a custom title', () => {
  render(<Header text="Test Text" />);
  expect(
    screen.getByRole('heading', { name: /Test Text/i }),
  ).toBeInTheDocument();
});

and here are my error messages:

If anyone has any tips on the right way to go about fixing this I would appreciate it. I am still new at typescript but lately it fells lik > 50% of my time is spent googling solutions to type errors like this....

LINK TO REPO: https://github.com/PaulHaze/ott-testing

[ts-ign0re]

Hi there! I've got the same problem

    "ts-jest": "^29.0.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/jest-native": "^4.0.5",
    "@types/testing-library__jest-dom": "^5.14.5",
    "babel-jest": "^29.2.2",
    "jest": "^29.2.2",
    "jest-circus": "^29.2.2",
    "jest-html-reporters": "^3.0.11",
    "jest-mock-axios": "^4.7.0-beta",
    "jest-stare": "^2.4.1",

[Hypenate]

Same issue

[MattYoooo]

This one should be the solution: https://github.com/pnpm/pnpm/issues/4920#issuecomment-1226724790

[feedm3]

For me, the problem got resolved with yarn add -D @testing-library/dom. I don't know why, maybe because we are using Yarn 3 PnP.

Setup now is:

// jest.config.js
module.exports = {
  ...
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
};

// jest.setup.ts
import '@testing-library/jest-dom';

[antondevv]

It appears like i were experiencing some problems with YARN version 3, but were able to resolve it by downgrading to YARN version 1. It's worth mentioning that this issue only occurred in my (CI).

[dhrjarun]

This one should be the solution: pnpm/pnpm#4920 (comment)

If you are using pnpm this might work for you.

[thevuong]

This one should be the solution: pnpm/pnpm#4920 (comment)

If you are using pnpm this might work for you.

Thanks you. It works for me.

[ptz000]

I've fixed it including in the jest-setup.ts also the react package (I'm using yarn 3) // jest.setup.ts import '@testing-library/jest-dom'; import '@testing-library/react';

and adding the types @types/testing-library__jest-dom in the tsconfig "compilerOptions": { ... "types": ["jest", "node", "@types/jest", "@types/testing-library__jest-dom"], } but I'm not sure if it's the right approach

[matthewbordas]

I fixed this by installing eslint-plugin-jest and adding the extension to my .eslintrc.js. I did not have to install any of the specific @types/ packages for jest or @testing-library/jest-dom.

[CWSites]

@ptz000's comment is what worked for me. I tried the others with no luck.

Updating the tsconfig.json which is used by that portion of code, I was also able to clean it up a bit more by implementing the following...

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types"]
  }
}

types is great, however then you are forced to be specific around which typings you want to use. Instead of that, by using typeRoots and setting it to look at ALL packages which are prefixed with @types it will automatically pull in ALL type packages and will be easier to maintain in the future.

[httpete]

I do not know how this works, but I have a file types/window.ts and in that I put this in there, and it works. window.ts exports: export interface Window {

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

[etnifsilva]

I've fixed it including in the jest-setup.ts also the react package (I'm using yarn 3) // jest.setup.ts import '@testing-library/jest-dom'; import '@testing-library/react';

and adding the types @types/testing-library__jest-dom in the tsconfig "compilerOptions": { ... "types": ["jest", "node", "@types/jest", "@types/testing-library__jest-dom"], } but I'm not sure if it's the right approach

It Also works using import '@testing-library/angular'; instead of @testing-library/react'; when you are in an angular project. I don't needed to include the @types/testing-library__jest-dom, I included the @testing-library/jest-dom instead.

versions:

"@testing-library/angular": "^14.3.0" "@testing-library/dom": "^9.3.1" "@testing-library/jest-dom": "^6.1.2" "@types/jest": "^29.5.4"

setup-jest.ts:

import 'jest-preset-angular/setup-jest';
import '@testing-library/jest-dom';
import '@testing-library/angular';

tsconfig.json:

"types": [
      ...
      "@testing-library/jest-dom"
    ]

in the first time I tried this configuration it doesn't worked, but, I added import '@testing-library/jest-dom'; in the testing file, so it started to work, even after remove the import line 🤷🏽‍♂️

[vicasas]

Same problem here. Using npm 9.6.7 and node 18.17.1

[bakakaba]

For anyone having this issue after an upgrade from v5 -> v6, the test environment set-up where import "@testing-library/jest-dom/extend-expect"; was previously called needs to be updated to import "@testing-library/jest-dom";.

It makes more sense but the documentation needs to be updated to reflect this change.

https://github.com/testing-library/jest-dom/blob/v5.17.0/src/extend-expect.js https://github.com/testing-library/jest-dom/blob/v6.1.3/src/index.js

[subhamsaha-manu]

For me I tried adding the following imports to my jest setup file, didnot work

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

Even adding "@types/testing-library__jest-dom" to types in tsconfig didnot help.

But just importing the following in a single test file

import '@testing-library/jest-dom'

fixes it in all test files.

[sunita-prismhr]

I tried adding import "@testing-library/jest-dom/extend-expect in jest setup file but it didn't work for me. Below steps worked for me.

• Create a jest-setup.ts file and add below code:

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

• Update setupFilesAfterEnv in jest.config.js as mentioned below: setupFilesAfterEnv: [ "./jest-setup.ts" ], moduleFileExtensions: [ "js", "mjs", "cjs", "jsx", "ts", "tsx", "d.ts", // "json", // "node" ]
• Add jest-setup file to include in tsconfig.json as mentioned below: "include": [ "./jest-setup.ts"],
• babel configuration (babel.config.js) is as mentioned below: module.exports = { presets: [ '@babel/preset-typescript', '@babel/preset-env', '@babel/preset-react', ] };
• Run the code.

[sqs]

For me, explicitly adding the @jest/expect dependency to my project made the type error go away (eg with pnpm add -D @jest/expect).

[oanaOM]

I tried adding import "@testing-library/jest-dom/extend-expect in jest setup file but it didn't work for me. Below steps worked for me.

* Create a jest-setup.ts file and add below code:

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

* Update setupFilesAfterEnv in jest.config.js as mentioned below:
  `setupFilesAfterEnv: [ "./jest-setup.ts" ], moduleFileExtensions: [ "js", "mjs", "cjs", "jsx", "ts", "tsx", "d.ts", // "json", // "node" ] `

* Add jest-setup file to include in tsconfig.json as mentioned below:
  `"include": [  "./jest-setup.ts"],`

* babel configuration (babel.config.js) is as mentioned below:
  `module.exports = { presets: [ '@babel/preset-typescript', '@babel/preset-env', '@babel/preset-react', ]  };`

* Run the code.

This worked for me 🎉 🙏

[bdombro]

None of the tips above helped me in 2024. This below ended up working:

Updating @testing-library/jest-dom from 5 to ^6.2.0