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

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

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

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

根据我的经验，5.x 版似乎缺少 Typescript 类型

Answer 2

上面的大多数解决方案似乎都解决了 Babel 或 Eslint。如果你对tslint纯 Typescript有这个问题，添加：@testing-library/jest-dom到你的类型就足够了

所以在你的打字稿配置中： //tsconfig.json

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

还请记住，您应该将该库包含在 Jest 中。与其在每个文件中都导入它，不如在配置文件中进行：

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

然后在文件中setupTests.js：

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

require()如果直接使用 TypeScript，甚至可以切换到。

Answer 3

对于pnpm用户（他们可能想知道为什么 npm 开箱即用），这是因为 pnpm 使用半严格的 node_modules 布局，这意味着只有少数包被提升到顶部（即可以通过简单的 import/require 访问） ）

请参阅此处的文档：https://pnpm.io/blog/2020/10/17/node-modules-configuration-options-with-pnpm#the-default-setup

这就是为什么如果您使用 pnpm，当前需要的快速修复是

pnpm add -D @types/testing-library__jest-dom

为了使其更加健壮，可以编辑 .npmrc 并仅提升缺少的依赖项。吊装设置。

例如

public-hoist-pattern[]=@vitest/expect # if using vitest
public-hoist-pattern[]=@jest/expect # if using jest

Answer 4

就我而言，这足以：

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

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

• 添加到.spec文件：

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

Answer 5

eslint 覆盖没有帮助，但是

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

在测试文件的乞求中解决了它。

我在这里以及来自 facebook 官方react starter app的 jest 设置文件中找到了这个答案。我希望它有帮助。

Answer 6

最近版本的@testing-library/jest-dom（例如5.11.2）开箱即用，对我来说问题是由 cypress 类型与@types/chai使用的冲突引起的@testing-library：

由于 Chai 和 jQuery 是命名空间（全局），不兼容的版本会导致包管理器（yarn 或 npm）嵌套并包含多个定义并导致冲突。

https://docs.cypress.io/guides/tooling/typescript-support.html#Configure-tsconfig-json

cypress通过在顶级 TS 配置中不包含该文件夹而是添加以下内容来解决cypress/tsconfig.json：

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

Answer 7

babel-jest如果您用于穿越，则所选答案通常是正确的。

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

• Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
• 这会导致Cannot use import statement outside a module如果您尝试添加importjest.afterEnv 文件

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

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

并且常见答案没有任何效果，然后按照以下步骤操作：

1. 显而易见，安装@testing-library/jest-dom使用：

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

2. 添加类型

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

与tsconfig.json上面类似。

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

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

4. 现在，检查您roots: ["./src"],的jest.config.js.

• globals.d.ts创建一个在该路径中调用的新文件
• 确保它"included"与您的正则表达式匹配tsconfig.json
• 粘贴到globals.d.ts以下行：

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

不要将此行附加到您的traspiler 的postEnv jest 设置中ts-jest。

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

旁注：

• 我的设置包括用于jestAPI 测试、E2E 测试、jestReact测试和堆栈中的浏览器测试- 现在一切都正常 - 所以不要放弃。supertestreact-testing-librarytestcafereact-testing-library
• 确保您的jest.config.js所有扩展都被覆盖moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]，特别是当您尝试运行.tsx测试时
• 如果toBeInTheDocument()在此过程中 VSCode 将停止以红色突出显示，并且您的测试仍然抛出错误，您可能错过了config.json或config.json 中的有效types声明。tsconfig.jsonjest

Answer 8

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

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

哪里"**/*.test.js"有一个与测试文件格式匹配的 glob。

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

请参阅此答案作为参考：/sf/answers/3444789841/
另请参阅 jest 环境配置：https://eslint.org/docs/user-guide/configuring#specifying-environments

Answer 9

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

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

Answer 10

我不知道是否有人需要阅读这篇文章。但我陷入了这个问题，因为我正在从 jest 重新导入一些函数。为了避免它，我删除了这个：

- import { describe, expect, it } from '@jest/globals';