How do I configure TS to find the types for @testing-library/jest-dom

Question

This is my tsconfig file

{
  "compilerOptions": {
    "noEmit": true,
    "allowJs": true,
    "esModuleInterop": true,
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "baseUrl": "./",
    "skipLibCheck": false,
    "rootDirs": [
      "./src",
      "../.redwood/types/mirror/web/src",
      "../api/src",
      "../.redwood/types/mirror/api/src"
    ],
    "paths": {
      "src/*": [
        "./src/*",
        "../.redwood/types/mirror/web/src/*",
        "../api/src/*",
        "../.redwood/types/mirror/api/src/*"
      ],
      "$api/*": [ "../api/*" ],
      "types/*": ["./types/*", "../types/*"],
      "@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/web"]
    },
    "typeRoots": ["../node_modules/@types", "./node_modules/@types"],
    "types": ["jest", "@testing-library/jest-dom"],
    "jsx": "preserve"
  },
  "include": [
    "src",
    "../.redwood/types/includes/all-*",
    "../.redwood/types/includes/web-*",
    "../types",
    "./types"
  ]
}

When I run tsc --noEmit --skipLibCheck I get this error

error TS2688: Cannot find type definition file for '@testing-library/jest-dom'.
  The file is in the program because:
    Entry point of type library '@testing-library/jest-dom' specified in compilerOptions

  tsconfig.json:29:23
    29     "types": ["jest", "@testing-library/jest-dom"],
                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    File is entry point of type library specified here.


Found 1 error.

This is my package.json

{
  "name": "web",
  "version": "0.0.0",
  "private": true,
  "browserslist": {
    "development": [
      "last 1 version"
    ],
    "production": [
      "defaults"
    ]
  },
  "dependencies": {
    "@redwoodjs/auth-dbauth-web": "7.0.0-canary.711",
    "@redwoodjs/forms": "7.0.0-canary.711",
    "@redwoodjs/router": "7.0.0-canary.711",
    "@redwoodjs/web": "7.0.0-canary.711",
    "humanize-string": "2.1.0",
    "react": "0.0.0-experimental-e5205658f-20230913",
    "react-dom": "0.0.0-experimental-e5205658f-20230913"
  },
  "devDependencies": {
    "@redwoodjs/vite": "7.0.0-canary.711",
    "@testing-library/jest-dom": "^6.1.5",
    "@types/react": "18.2.37",
    "@types/react-dom": "18.2.15",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.32",
    "postcss-loader": "^7.3.3",
    "prettier-plugin-tailwindcss": "0.4.1",
    "tailwindcss": "^3.3.6"
  }
}

What do I need to do to make TS find the types for @testing-library/jest-dom?

More details:

This worked with @testing-library/jest-dom v5, but broke when we upgraded to v6

If I remove it from types in tsconfig I get type errors about missing properties (see comments). I can work around that by including import '@testing-library/jest-dom' in one of my test files. But I didn't have to do that before, and I want to understand why I have to now.

Answer 1

The solution was to change my tsconfig.json from this:

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

to this:

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

The types for @testing-library/jest-dom used to be provided by https://www.npmjs.com/package/@types/testing-library__jest-dom but now they're shipped with the main package itself. Because of this it's no longer enough to just look in node_modules/@types. I now needed to tell TS to also look for types in ../node_modules/@testing-library, so I added that to typeRoots. And inside that path, it should look for the types "jest-dom", as specified in types.