Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
vqc1909a opened this issue Jan 27, 2024 · 5 comments

Comments

@vqc1909a
Copy link

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

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:
image

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:
image

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
Copy link

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
Copy link

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

tsconfig.json

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

@vqc1909a
Copy link
Author

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

image
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
Copy link

Dyn4sty commented Apr 4, 2024

Maybe its relted to this issue? #546 (comment)

@keqing77
Copy link

keqing77 commented Jun 7, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants