jest-dom: Property 'toBeChecked' does not exist on type 'Matchers'

  • @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

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 25
  • Comments: 27 (1 by maintainers)

Most upvoted comments

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

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

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

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

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

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 one should be the solution: pnpm/pnpm#4920 (comment)

If you are using pnpm this might work for you.

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

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

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.