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

[Deleted user]

Hi,

After updating to React 18 and all testing frameworks related changes, my tests are running fine but the IDE (VS Code or other) is not able to extract the types for RTL. For example:
Property 'toBeInTheDocument' does not exist on type 'JestMatchers'.

These are the versions I'm using:

   "@testing-library/jest-dom": "^6.3.0",
    "@testing-library/react": "^14.1.2",
    "@testing-library/user-event": "^14.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "jest": "^29.7.0",
    "jest-cli": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "ts-jest": "^29.1.1",
    "typescript": "5.1.6",

Jest config is like this:

module.exports = {
  rootDir: "src",
  testEnvironment: "<rootDir>/test/utils/custom-test-env.ts",
  preset: "ts-jest",
  transform: {
    "^.+\\.(j|t)sx?$": [
      "ts-jest",
      {
        isolatedModules: true,
      },
    ],
  },
  setupFilesAfterEnv: ["@testing-library/jest-dom"],
  testPathIgnorePatterns: [
    "/node_modules/",
  ]

For the IDE to capture the types, do we need to import "@testing-library/jest-dom" in each test file? With previous version this was not needed.

Thanks for the help.

[Matan Borenkraout]

Hi @jandresampaiowiliot :)
AFAIK, the error you're seeing isn't related to any React version. That might be related to the fact that you've updated all the testing frameworks.
Try creating a test file named jest-setup.js and use it in your setupFilesAfterEnv:

setupFilesAfterEnv: ['<rootDir>/jest-setup.js']

Inside the file write this:

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

This will import the matchers into every test.

[Deleted user]

Hi @MatanBobi . thanks for update. I've tried that before, tests work fine, but still the IDE underlines these matchers as error

[Matan Borenkraout]

Got it. Do you have this in your tsconfig?

  "include": [
    ...
    "./jest-setup.ts"
  ],

[Deleted user]

Also tried that one. Still doesn't work.
Only way to make it work is to add the import in Test files or navigate to specific testing-library types in node_modules

[Matan Borenkraout]

I understand. this sounds like an issue with your specific IDE. Are you able to reproduce it somewhere else? In codesandbox/StackBlitz? Have you tried restarting the TSServer in your IDE? When you added the include, did you have the import inside the test file?

[Deleted user]

All my team members have the same issue, also with Webstorm.
I had the import there before including file (btw, file was already included because it was inside src folder:
"include": ["src/**/*" ]

Do you have any sandbox/stackblitz base project with RTL 14 to be able to play with it and reproduce the issue?

[Matan Borenkraout]

Yeah we, you can give it a try here:
https://testing-library.com/new-rtl

[Deleted user]

@MatanBobi I see the issue, we are excluding test files from compilation by using the tsconfig below. If we delete the exclude option, instantly the IDE errors disappear.
Is there an option to let type checking happen even if test files are excluded?
Also, with previous version we didn't need to do any additional setup, types were acquired in the tests, even if the test files were excluded. What has changed?

{
  "extends": "ts-config-single-spa",
  "compilerOptions": {
    "jsx": "react-jsx",
    "declarationDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["src/**/*.test*"]
}

[Matan Borenkraout]

I'm not familiar with anything's changing in that area. I'm also not sure why you'd want to exclude test files from having typecheck. Having said that, this doesn't seem like an issue with Testing Library so I'm resolving this.
Is your setup file name using .test inside of it? If it does, it might explain this, try renaming it to a format that won't be excluded (only the setup file).