属性“ toBeInTheDocument”不存在于类型“ Matcher < any >”上

小开

As noted in the comment, it's your eslint configuration that needs to be changed. You should update your eslintrc file to include a configuration override for test files:

  ...
overrides: [
{
files: [
"**/*.test.js"
],
env: {
jest: true
}
}
]

Where "**/*.test.js" is a glob that matches the format of your test files.

Changing the eslintrc file ensures you don't have to add the eslint-env comment to the top of every test file.

See this answer as a reference: https://stackoverflow.com/a/49211283/1769777
Also see the jest environment configuration: https://eslint.org/docs/user-guide/configuring#specifying-environments

小开

最佳答案

Please make sure that the correct types are installed in your project. i.e.

npm i -D @testing-library/jest-dom@^4.2.4

From my experience the Typescript types seem to be missing from version 5.x

小开

eslint overrides didn't help, but

import '@testing-library/jest-dom/extend-expect'

in the begging of the test file solved it.

I found this answer here and also in the jest setup file from the facebook's official react starter app. I hope it helps.

小开

Please make sure you add: import "@testing-library/jest-dom/extend-expect" after: import { render } from "@testing-library/react"

import React from "react"
import { render } from "@testing-library/react"
import "@testing-library/jest-dom/extend-expect"

小开

Most of the answers here seem to address primarily Babel. With anything else like eslint, tslint etc. and pure Typescript it's enough to add @testing-library/jest-dom to your types.

So a few quick steps:

Make sure you've got the library installed:

yarn add -D @testing-library/jest-dom

or

npm i @testing-library/jest-dom --save-dev

and then link it in your tsconfig.json:

"types": ["node", "jest", "@testing-library/jest-dom"],

Now we tackle Jest configuration. Rather than import it in every test file it is better to do it in the Jest config file (usually it's called jest.config.js):

setupFilesAfterEnv: [
"<rootDir>/support/setupTests.js"
],

and then in the file setupTests.js:

import '@testing-library/jest-dom/extend-expect'

or use to require() if using pure JavaScript or different configuration.

The alternative (for TypeScript or if you don't like adding setupTests.js) is to add globals.d.ts (in my case to the project root directory) and add there the line above (import ...).

Note: Both solution work without setting esModuleInterop.

小开

The recent versions of @testing-library/jest-dom (e.g. 5.11.2) work out of the box, the issue for me was caused by cypress types conflicting with @types/chai used by @testing-library:

Since Chai and jQuery are namespaces (globals), incompatible versions will cause the package manager (yarn or npm) to nest and include multiple definitions and cause conflicts.

https://docs.cypress.io/guides/tooling/typescript-support.html#Configure-tsconfig-json

Solved by not including the cypress folder in the top-level TS config but instead adding cypress/tsconfig.json:

{
"extends": "../tsconfig.json",
"compilerOptions": {
"baseUrl": "../node_modules",
"types": ["cypress"]
},
"include": [
"**/*.ts"
]
}

小开

If you are getting this error while integrating Enzyme with Jest, make sure you use jest assertion methods.

In Enzyme documentation examples chai assertions are used. Instead of that we have to use jest assertions.

Ex. Use

expect(wrapper.find(Foo)).toHaveLength(3);

instead of

expect(wrapper.find(Foo)).to.have.lengthOf(3);

小开

import '@testing-library/jest-dom/extend-expect';
import '@testing-library/jest-dom';

These lines prepended to SetupTests.ts fixed it for me.

小开

The selected answer is usually correct if you are using babel-jest for traspilation.

For those who are still struggling due to the following errors:

Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
which leads to Cannot use import statement outside a module if you try to add import in jest.afterEnv file

Solving it with babel might lead to issues like Cannot use import statement outside a module due to the fact those two work differently. So if want to solve it purely using ts-jest (that means in your jest config you have line similar to):

transform: {
"^.+\\.(ts|tsx)$": "ts-jest"
},

and nothing from the common answers worked then follow the steps below:

The obvious, install @testing-library/jest-dom using:

npm install --save-dev @testing-library/jest-dom

Add types

"types": ["node", "jest", "@testing-library/jest-dom"]

to tsconfig.json similar as above.

In your jest.config.js config add the below:

...
setupFilesAfterEnv: [
"@testing-library/jest-dom/extend-expect"
]
...

Now, check your roots: ["./src"], path in your jest.config.js.

Create a new file called globals.d.ts in that path
Make sure it is matching the "included" regex within your tsconfig.json
Paste into globals.d.ts the following line.:

import "@testing-library/jest-dom/extend-expect"

Don't attach this line to your postEnv jest setup for ts-jest traspiler.

Run your tests and enjoy the result.

Side-notes:

My setup includes using jest for API testing, jest with supertest for E2E, jest with react-testing-library for React testing and browser testcafe tests with react-testing-library in the stack - and it all works now - so don't give up.
Make sure in your jest.config.js all the extensions are covered i.e. moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"], especially if you are trying to run .tsx tests
If it happens that VSCode will stop highlighting in red toBeInTheDocument() during this process and your tests still throw the error you have likely missed the valid types declaration either in tsconfig.json or in jest config.

小开

In my case it was enough to:

add to the package.json in devDependencies and install:

"@testing-library/jest-dom": "^5.11.9",

add to the .spec file:

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

小开

I messed with this for a couple of hours and read all the Q&A sites. Nothing worked, except for moving @testing-library/react and @testing-library/jest-dom out of devDependencies, and into dependencies.

I don't know why they're needed for production exactly, but it works.

小开

This can happen if you are using different testing libraries together (e.g. Cypress and Jest). Both have expect with different matchers, which creates a conflict.

To fix it, you can try adding the following to tsconfig.json:

{
...,
"exclude": [
"**/*.spec.ts"
]
}

And the following to tsconfig.spec.json:

{
"extends": "./tsconfig.json",
"include": [
"**/*.spec.ts"
],
...
}

小开

I had this issue when importing types from @jest/globals as explained in the docs. testing-library/jest-dom in 5.0.1 moved their typed definitions in a separate package so that it works out of the box without any config. I needed to update testing-library/jest-dom and jest, not use any extra type library, not import any types, and it works out of the box.

setupTests.ts

import '@testing-library/jest-dom/extend-expect';

package.json

"@testing-library/jest-dom": "5.12.0"
"jest": "27.3.1"

小开

I was using only Jest and Cypress with NextJs. The issue kept occurring after trying everything until I added cypress.config.ts file to the list of exclude in my tsconfig.json file. Inside my tsconfig file, I did:

{
"exclude": [..., "./cypress.config.ts"],
...
}

You can check this link for more info: https://github.com/cypress-io/cypress/issues/22059

小开

I dont know if someone need to read this. But i was stuck into this issue cuz i was re-importing some functions from jest. To avoid it, i remove this:

- import { describe, expect, it } from '@jest/globals';