属性 'toBeInTheDocument' 在类型 'Matchers<any>' 上不存在

Question

我正在尝试为我的简单 React 应用程序编写测试，该应用程序使用 API 等为狗收容所创建 UI。我已经导入了如下所示的模块和运行以下命令

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

但是，我得到了 toBeInTheDocument();红色下划线的方法和错误消息

"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();
  });

});

感谢任何有关如何解决此问题的建议。

Answer 1

如评论中所述，需要更改的是您的 eslint 配置。您应该更新 eslintrc 文件以包含测试文件的配置覆盖：

  ...
  overrides: [
    {
      files: [
        "**/*.test.js"
      ],
      env: {
        jest: true
      }
    }
  ]

其中 "**/*.test.js" 是一个与您的测试文件格式匹配的 glob。

更改 eslintrc 文件可确保您不必将 eslint-env 注释添加到每个测试文件的顶部。

参考这个答案：
另见jest环境配置：https://eslint.org/docs/user-guide/configuring#specifying-environments

Answer 2

请确保您的项目中安装了正确的类型。即

npm i -D @testing-library/jest-dom@^4.2.4

根据我的经验，版本 5.x

中似乎缺少 Typescript 类型

Answer 3

eslint 覆盖没有帮助，但是

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

在测试文件的开头解决了它。

我找到了这个答案 here and also in the jest setup file from the facebook's official react starter app。希望对你有帮助。

Answer 4

请务必添加： import "@testing-library/jest-dom/extend-expect" 后： import { render } from "@testing-library/react"

import React from "react"
import { render } from "@testing-library/react"
import "@testing-library/jest-dom/extend-expect"

Answer 5

这里的大部分答案似乎主要针对 Babel。使用 eslint、tslint 等其他任何东西和纯 Typescript 就足以将 @testing-library/jest-dom 添加到您的类型中。

几个快速步骤：

确保你已经安装了库：

yarn add -D @testing-library/jest-dom

或

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

然后 link 它在你的 tsconfig.json:

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

现在我们来处理 Jest 配置。与其在每个测试文件中导入它，不如在 Jest 配置文件中导入它（通常称为 jest.config.js）：

setupFilesAfterEnv: [
   "<rootDir>/support/setupTests.js"
],

然后在文件中setupTests.js:

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

或使用 require() 如果使用纯 JavaScript 或不同的配置。

另一种方法（对于 TypeScript 或者如果您不喜欢添加 setupTests.js）是添加 globals.d.ts（在我的例子中添加到项目根目录目录）并在其中添加上面的行 (import ...).

注意：两种解决方案都有效而无需设置esModuleInterop.

Answer 6

@testing-library/jest-dom 的最新版本（例如 5.11.2）开箱即用，我的问题是由于 cypress 类型与 [=14= 使用的 @types/chai 冲突引起的]:

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

解决方法是在顶级 TS 配置中不包含 cypress 文件夹，而是添加 cypress/tsconfig.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "../node_modules",
    "types": ["cypress"]
  },
  "include": [
    "**/*.ts"
  ]
}

Answer 7

如果在将 Enzyme 与 Jest 集成时出现此错误，请确保使用 jest 断言方法。

在 Enzyme 文档示例中使用了 chai 断言。相反，我们必须使用 jest 断言。

例如。使用

expect(wrapper.find(Foo)).toHaveLength(3);

而不是

expect(wrapper.find(Foo)).to.have.lengthOf(3);

Answer 8

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

添加到 SetupTests.ts 前面的这些行为我修复了它。

Answer 9

如果您使用 babel-jest 进行拖拉，则所选答案通常是正确的。

对于那些因以下错误而仍在苦苦挣扎的人：

Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
如果您尝试在 jest.afterEnv 文件

import

Cannot use import statement outside a module

使用 babel 解决它可能会导致 Cannot use import statement outside a module 之类的问题，因为这两者的工作方式不同。所以如果想纯粹使用 ts-jest 来解决它（这意味着在你的笑话配置中你有类似于以下的行）：

transform: {
  "^.+\.(ts|tsx)$": "ts-jest"
},

如果常见答案没有任何效果，请按照以下步骤操作：

很明显，安装 @testing-library/jest-dom 使用：

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

添加类型

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

到tsconfig.json 同上。

在您的 jest.config.js 配置中添加以下内容：

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

现在，检查您 jest.config.js 中的 roots: ["./src"], 路径。

在该路径中创建一个名为 globals.d.ts 的新文件
确保它与 tsconfig.json

"included"

粘贴到 globals.d.ts 下一行：

import "@testing-library/jest-dom/extend-expect"

不要将此行附加到 postEnv 用于 ts-jest traspiler 的开玩笑设置。

运行您的测试并享受结果。

旁注：

我的设置包括使用 jest 进行 API 测试，使用 jest 和 supertest 进行 E2E，使用 react-testing-library 进行 React 测试和浏览器 testcafe 在堆栈中使用 react-testing-library 进行测试 - 现在一切正常 - 所以不要放弃。
确保在你的 jest.config.js 中涵盖所有扩展，即 moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]，尤其是当你尝试运行 .tsx 测试时
如果碰巧 VSCode 在此过程中将停止以红色突出显示 toBeInTheDocument() 并且您的测试仍然抛出错误，您可能错过了 types 中有效的 types 声明22=] 或在 jest 配置中。

Answer 10

就我而言，这足以：

添加到devDependencies中的package.json并安装：

"@testing-library/jest-dom": "^5.11.9",

添加到 .spec 文件：

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

Answer 11

我花了几个小时来解决这个问题，并阅读了所有的问答网站。除了将 @testing-library/react 和 @testing-library/jest-dom 移出 devDependencies 并移入 dependencies.

之外，没有任何效果

我不知道为什么生产需要它们，但它确实有效。

Answer 12

如果您同时使用不同的测试库（例如 Cypress 和 Jest），就会发生这种情况。两者都有 expect 与不同的匹配器，这会产生冲突。

要修复它，您可以尝试将以下内容添加到 tsconfig.json：

{
  ...,
  "exclude": [
    "**/*.spec.ts"
  ]
}

以及 tsconfig.spec.json 的以下内容：

{
  "extends": "./tsconfig.json",
  "include": [
    "**/*.spec.ts"
  ],
  ...
}

属性 'toBeInTheDocument' 在类型 'Matchers<any>' 上不存在

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

testing

mocha.js

reactjs

jestjs