如何配置 TS 来查找 @testing-library/jest-dom 的类型

Question

这是我的 tsconfig 文件

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

当我运行

tsc --noEmit --skipLibCheck

时，我收到此错误

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.

这是我的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"
  }
}

我需要做什么才能让 TS 找到

@testing-library/jest-dom

的类型？

更多详情：

这适用于 @testing-library/jest-dom v5，但当我们升级到 v6 时就崩溃了

如果我从 tsconfig 中的

types

中删除它，我会收到有关缺少属性的类型错误（请参阅评论）。我可以通过包括来解决这个问题

import '@testing-library/jest-dom'

在我的一个测试文件中。但我以前不必这样做，我想了解为什么我现在必须这样做。

Answer 1

解决方案是更改我的 tsconfig.json：

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

对此：

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

@testing-library/jest-dom

的类型过去由https://www.npmjs.com/package/@types/testing-library__jest-dom提供，但现在它们与主包本身一起提供。所以我需要告诉 TS 也在

../node_modules/@testing-library

中查找类型，所以我将其添加到

typeRoots

中。在该路径内，它应该查找类型“jest-dom”，如

types

中指定。