Property 'toBeInTheDocument' does not exist on type 'Matchers'

Question

I'm trying to write tests for my simple React App that creates a UI for a dog Shelter using API etc. I have imported the modules shown below and ran the following command

npm install jest-dom react-testing-library --save-dev

However, I'm getting the toBeInTheDocument(); method underlined in red and the error message

"Property 'toBeInTheDocument' does not exist on type 'Matchers<any>'."

import "react-testing-library/cleanup-after-each";
import "jest-dom/extend-expect";

import * as React from "react";
import PetCard from "./PetCard";
import Pet from "./Pet";
import { render } from "react-testing-library";

const petMock = {
  id: "225c5957d7f450baec75a67ede427e9",
  name: "Fido",
  status: "available",
  kind: "dog",
  breed: "Labrador",
} as Pet;

describe("PetCard", () => {
  it("should render the name", () => {
    const { getByText } = render(<PetCard pet={petMock} />);
    expect(getByText("Fido")).toBeInTheDocument();
  });

});

Any advice on how I can resolve this is appreciated.

Answer 1

Most of the answers here seem to address primarily Babel. If you don't use Babel 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.

Note: If using TypeScript, add the typings with npm install @types/testing-library__jest-dom -D

Answer 2

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

Answer 3

For pnpm users (who might be wondering why this works out of the box with npm), it's because pnpm uses a semi-strict node_modules layout, which means only a few packages are hoisted to the top (ie. accessible via a simple import/require)

See the docs here: https://pnpm.io/blog/2020/10/17/node-modules-configuration-options-with-pnpm#the-default-setup

That's why if you are using pnpm the quick-fix that's needed currently is

pnpm add -D @types/testing-library__jest-dom

To make it a bit more robust one could edit .npmrc and figure out which hoisting setting to use.

Answer 4

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.

Answer 5

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

Answer 6

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"
  ]
}

Answer 7

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:

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

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

2. Add types

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

to tsconfig.json similar as above.

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

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

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

Answer 8

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

Answer 9

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

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

Answer 10

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

Answer 11

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"

Answer 12

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"
  ],
  ...
}

Answer 13

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"

Answer 14

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

Answer 15

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);

Answer 16

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.

Answer 17

That's my solutions for this problem in my react project:

1. install @types/testing-library__jest-dom.

npm i -D @types/testing-library__jest-dom

2. according to @testing-library/jest-dom typescript usage, we need import '@testing-library/jest-dom' in jest-setup.ts and add setupFilesAfterEnv to jest.config.js

// In jest-setup.ts (or any other name)
import '@testing-library/jest-dom'

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

3. include jest-setup.ts in tsconfig.json

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

Answer 18

If you're using pnpm v7 or v8, Add this to your .npmrc:

public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*
public-hoist-pattern[]=@types*

Then, run pnpm install

Reference: https://github.com/pnpm/pnpm/issues/4920#issuecomment-1226724790