jest-dom 6.1.4 breaks jest types

[pavanjoshi914]

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

[Dyn4sty]

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.

[pavanjoshi914]

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

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

[Marantesss]

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.

[pavanjoshi914]

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?

[pavanjoshi914]

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

[Marantesss]

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 👍

[alan-nascimento]

Hey there,
I started facing this issue after upgrading @testing-library/jest-dom version from 5.16.5 to 6.4.2.
I have reverted this change for now.

[alexdevero]

The same issue with vitest after update of @testing-library/jest-dom to 6.4.8.

vitest-setup.ts:

import { afterEach, beforeAll, vi, MockInstance, expect } from 'vitest';
import { cleanup } from '@testing-library/react';
import { defineMatchMedia } from './tests/mocks/browserProperties';

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

beforeAll(() => {
  // Fix for missing matchMedia
  defineMatchMedia();

  // Fix for "Error: Not implemented: window.computedStyle(elt, pseudoElt)"
  const { getComputedStyle } = window;
  window.getComputedStyle = elt => getComputedStyle(elt);
});

afterEach(() => {
  cleanup();
});

tsconfig:

{
  "compilerOptions": {
    "outDir": ".next",
    "target": "esnext",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "sourceMap": true,
    "inlineSources": true,
    "sourceRoot": "/",
    "forceConsistentCasingInFileNames": true,
    "noEmit": false,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@constants/*": ["src/constants/*"],
      "@forms/*": ["src/components/Forms/*"],
      "@helpers/*": ["src/helpers/*"],
      "@hooks/*": ["src/hooks/*"],
      "@styles/*": ["src/styles/*"],
      "@images/*": ["src/images/*"],
      "@routes": ["src/routes.ts"],
      "@types": ["src/GraphQL.tsx"],
      "@pages/*": ["pages/*"],
      "@testUtils/*": ["tests/utils/*"],
      "@mocks/*": ["tests/mocks/*"],
      "types": ["vitest/globals"]
    },
    "typeRoots": ["node_modules/@types", "types/next-auth.d.ts"],
    "useUnknownInCatchVariables": false
  },
  "exclude": ["node_modules", ".next"],
  "include": ["next-env.d.ts", "src/**/*", "pages/**/*", "types/**/*", "tests/**/*", "eslint.config.mjs", "./vitest-setup.ts"]
}