jest-dom 6.1.4 breaks jest types

[Pavan Joshi]

• @testing-library/jest-dom 6.1.4:
• node >=16:
• jest (or vitest) version:0.2.29
• npm (or yarn) version: >=1.0.0

Relevant code or config:

What you did:

What happened:

it breaks the jest types when running tsc compile command

Reproduction:

even if i define types in my tsconfig error still persist

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "allowJs": true,
    "jsx": "react-jsx",
    "outDir": "built",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"],
      "@components/*": ["./src/app/components/*"],
      "@screens/*": ["./src/app/screens/*"]
    },
    "types": ["@jest/globals"],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src", "jest.setup.ts", "jest.config.ts"],
  "exclude": ["built"]
}

[:)]

I've come across the issue you're experiencing and I believe I have a solution that might help you.

If you add the following line to your tsconfig.json under compilerOptions:

{
  "compilerOptions": {
    // ... other options
    "types": ["@testing-library/jest-dom"],
    // ... other options
  }
}

This will inform TypeScript to include the type definitions from @testing-library/jest-dom, which should resolve the type errors you're seeing.

[Pavan Joshi]

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

i already tried that and mentioned in the issue itself. it didn't worked

[Gonçalo Marantes]

I've just upgraded a CRA application with React 18 (with JS not TS) from:

"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",

to

"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.1.0",
"@testing-library/user-event": "^14.5.1",

and I'm getting the same issue: Global jest types are not working with intellisense.

I've noticed that my yarn.lock file also has this change:

Which I believe is causing the issue.

So far, I've found 2 solutions:

Solution 1

Add:

  "typeAcquisition": {
    "include": [ "jest" ]
  }

to you jsconfig.json if you're building a CRA app with React 18 and JavaScript.

Solution 2

Install @types/jest as a dev dependency.

yarn add -D @types/jest

The latter might work best for you :) @pavanjoshi914

Nonetheless, I'll wait for a fix regarding this issue.

[Pavan Joshi]

if i add @types/jest and use "types": ["@testing-library/jest-dom"], in my tsconfig then rest of the errors are solved. i get only
error TS2304: Cannot find name 'chrome'. error any idea why is this?

[Pavan Joshi]

the solution worked for me is, use @types/jest instead of @jest/types. and introduce typings that i use in tests explicitly in tsconfig
for eg.: "types": ["@testing-library/jest-dom", "@types/chrome"], i had to introduce two typing libraries that is used in my tests.

but still it will be good to make newer versions compatible with @jest/types package as well

[Gonçalo Marantes]

the solution worked for me is, use @types/jest instead of @jest/types. and introduce typings that i use in tests explicitly in tsconfig for eg.: "types": ["@testing-library/jest-dom", "@types/chrome"], i had to introduce two typing libraries that is used in my tests.

but still it will be good to make newer versions compatible with @jest/types package as well

Oh wow, I had no idea @jest/types even existed. However, even if @jest/types and @types/jest have similar names, they seem to serve different purposes according to this thread I found: jestjs/jest#9972

@jest/types are for the shared types of Jest's packages - useful if building an integration with Jest itself or one of its modules.

@types/jest will stick Jest's globals into your environment.

So it seems adding @types/jest is the correct package to solve our problem 👍