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

FedeTommi · 2022-03-04T17:57:00Z

@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

The text was updated successfully, but these errors were encountered:

gnapse · 2022-03-04T19:08:20Z

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 · 2022-05-18T14:47:42Z

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

SaiRS · 2022-06-04T23:56:49Z

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

grug · 2022-06-09T13:23:20Z

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

How come this is needed?

octant · 2022-06-22T12:01:22Z

Two things fixed my issue:

Installing @types/testing-library__jest-dom
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 · 2022-06-25T13:43:50Z

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 · 2022-09-30T07:00:20Z

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 · 2022-11-01T01:58:23Z

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 · 2022-11-02T08:01:15Z

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 · 2022-11-04T12:30:05Z

Same issue

MattYoooo · 2022-11-24T04:01:15Z

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

feedm3 · 2022-11-29T17:44:11Z

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 · 2022-12-04T14:54:47Z

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 · 2022-12-15T05:40:52Z

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

If you are using pnpm this might work for you.

thevuong · 2022-12-31T07:16:54Z

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 · 2023-01-30T11:39:48Z

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 · 2023-02-24T21:02:00Z

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 · 2023-04-25T20:56:53Z

@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 · 2023-08-17T02:41:41Z

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 · 2023-09-01T19:46:15Z

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 · 2023-09-27T16:33:28Z

Same problem here. Using npm 9.6.7 and node 18.17.1

bakakaba · 2023-10-05T06:17:44Z

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 · 2023-10-07T08:09:20Z

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 · 2023-10-12T07:33:58Z

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 · 2023-10-22T23:30:24Z

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 · 2023-11-24T09:28:26Z

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 · 2024-01-11T23:47:22Z

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

roman-sh2024 · 2024-06-25T10:19:07Z

I have tried different things but then noticed that it was written with uppercase letter: "ToBeChecked()". It was resolved for me by writing with lowercase letter "toBeChecked()".

To avoid complaint about > Property 'toBeChecked' does not exist on type 'Matchers<void, Element>' See testing-library/jest-dom#442 (comment) and https://github.com/testing-library/jest-dom/releases/tag/v6.2.0

zhyd1997 mentioned this issue Aug 22, 2022

After seting up with pnpm, thne, when it runs, there is an error 'Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>' in App.test.tsx facebook/create-react-app#12622

Open

juank1809 mentioned this issue Oct 10, 2022

fix: add a setup jest file in twitter ui containing an import of jest-dom juank1809/twiteer#58

Closed

t-richards mentioned this issue Jan 22, 2023

Bump deps t-richards/trueblock#2

Merged

casaub0n mentioned this issue May 10, 2023

change TypeScript paths to @/ casaub0n/cfstack#293

Merged

huyenltnguyen mentioned this issue Apr 24, 2024

feat(tools): enable typecheck on all TypeScript files freeCodeCamp/ui#97

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

FedeTommi commented Mar 4, 2022

gnapse commented Mar 4, 2022

vitalybaev commented May 18, 2022

SaiRS commented Jun 4, 2022

grug commented Jun 9, 2022

octant commented Jun 22, 2022

octant commented Jun 25, 2022

tmkkz commented Sep 30, 2022 •

edited

Loading

PaulHaze commented Nov 1, 2022 •

edited

Loading

ts-ign0re commented Nov 2, 2022

Hypenate commented Nov 4, 2022

MattYoooo commented Nov 24, 2022

feedm3 commented Nov 29, 2022 •

edited

Loading

antondevv commented Dec 4, 2022

dhrjarun commented Dec 15, 2022

thevuong commented Dec 31, 2022 •

edited

Loading

ptz000 commented Jan 30, 2023 •

edited

Loading

matthewbordas commented Feb 24, 2023

CWSites commented Apr 25, 2023

httpete commented Aug 17, 2023

etnifsilva commented Sep 1, 2023 •

edited

Loading

vicasas commented Sep 27, 2023

bakakaba commented Oct 5, 2023

subhamsaha-manu commented Oct 7, 2023

sunita-prismhr commented Oct 12, 2023 •

edited

Loading

sqs commented Oct 22, 2023

oanaOM commented Nov 24, 2023

bdombro commented Jan 11, 2024

roman-sh2024 commented Jun 25, 2024

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

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

Comments

FedeTommi commented Mar 4, 2022

Relevant code or config:

What you did:

What happened:

What I have tried:

gnapse commented Mar 4, 2022

vitalybaev commented May 18, 2022

SaiRS commented Jun 4, 2022

grug commented Jun 9, 2022

octant commented Jun 22, 2022

octant commented Jun 25, 2022

tmkkz commented Sep 30, 2022 • edited Loading

PaulHaze commented Nov 1, 2022 • edited Loading

ts-ign0re commented Nov 2, 2022

Hypenate commented Nov 4, 2022

MattYoooo commented Nov 24, 2022

feedm3 commented Nov 29, 2022 • edited Loading

antondevv commented Dec 4, 2022

dhrjarun commented Dec 15, 2022

thevuong commented Dec 31, 2022 • edited Loading

ptz000 commented Jan 30, 2023 • edited Loading

matthewbordas commented Feb 24, 2023

CWSites commented Apr 25, 2023

httpete commented Aug 17, 2023

etnifsilva commented Sep 1, 2023 • edited Loading

vicasas commented Sep 27, 2023

bakakaba commented Oct 5, 2023

subhamsaha-manu commented Oct 7, 2023

sunita-prismhr commented Oct 12, 2023 • edited Loading

sqs commented Oct 22, 2023

oanaOM commented Nov 24, 2023

bdombro commented Jan 11, 2024

roman-sh2024 commented Jun 25, 2024

tmkkz commented Sep 30, 2022 •

edited

Loading

PaulHaze commented Nov 1, 2022 •

edited

Loading

feedm3 commented Nov 29, 2022 •

edited

Loading

thevuong commented Dec 31, 2022 •

edited

Loading

ptz000 commented Jan 30, 2023 •

edited

Loading

etnifsilva commented Sep 1, 2023 •

edited

Loading

sunita-prismhr commented Oct 12, 2023 •

edited

Loading