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

[vqc1909a]

• @testing-library/jest-dom version: 6.3.0 | 5.16.5 | 5.17
• node version: v20.10.0
• jest version: 29.7.0
• yarn version: 1.22.21

Other dependencies:

Relevant code or config:

//jest.config.js
module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'jest-environment-jsdom',
    setupFiles: ['./jest.setup.ts'],
}

//jest.setup.ts
import 'whatwg-fetch';

What you did:

I was making up a project vite react with typescript through one and other ways but i always have the following mistake

What happened:

This is the mistake:

Problem description:

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

• Property 'toBeDisabled' does not exist on type 'JestMatchers<void, HTMLElement>'.

Suggested solution:

I have tried through one and other ways to solution this mistake but what it say me that it's a problem own package is the following:

what i make is import the package "@testing-library/jest-dom" with the mean the test file recognize me the methods like "toBeInTheDocument", "toBeDisabled" but i always will get the same. If somebody know the solution i will appreciate it

[andykenward]

Do you have to use Jest? I only ask as Vite and Jest currently has some limitations. https://jestjs.io/docs/getting-started#using-vite . Is it possible to replace Jest with Vitest ?

[andykenward]

@vqc1909a try adding your jest.setup.ts file to the tsconfig.json "include" array.

tsconfig.json

{
  "include": ["src", "./jest.setup.ts"],
}

[vqc1909a]

Already I find what is the problem, basically i had put the following line "import '@testing-library/jest-dom'" in the top each file for avoid them syntax error about jest DOM

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

besides about it, i have made a lot of configurations in some files for set up jest in vite react project with typescript, so if you want to see this configurations, i put below the gist url about it

https://gist.github.com/vqc1909a/e04b4775aea3ba2c2532272bf79b6fc3

[Dyn4sty]

Maybe its relted to this issue? https://github.com/testing-library/jest-dom/issues/546#issuecomment-1800436478

[keqing77]

after setup these config, errors gone

// tsconfig.json
"jsx": "react-jsx",
"types": ["jest","testing-library/jest-dom"],
"include": ["test/unit/jest.setup.ts"]

// package.json
@testing-library/jest-dom
@testing-library/react
@types/jest
jest
jest-environment-jsdom
ts-jest
ts-node-dev