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

Posted 2023-02-22

【中文标题】类型“Matchers<any>”上不存在属性“toBeInTheDocument”

【英文标题】：Property 'toBeInTheDocument' does not exist on type 'Matchers<any>'

【发布时间】：2020-01-11 15:27:42

【问题描述】：

我正在尝试为我的简单 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();
  );

);

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

【问题讨论】：

听起来可能是eslint在抱怨，你有没有试过改变eslint环境？尝试将其放在测试文件的顶部/* eslint-env jest */

谢谢你的工作:)

【参考方案1】：

上面的大多数解决方案似乎都解决了 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'

如果使用 javascript 或其他配置，请使用 require()。

【讨论】：

面临找不到 toBeVisible() 的问题（TS2339：“JestMatchersShape, Matchers, any> 类型不存在属性 'toBeVisible' >'）。导入 jest-dom/extend-expect 解决了它。

"types": ["node", "jest", "@testing-library/jest-dom"] 不应该在 ts-configs 中吗？

这在没有babel-jest 的情况下仅在ts-jest 上是不可行的，这需要额外的设置。这样做你会得到：SyntaxError: Cannot use import statement outside a module

这帮我解决了，谢谢！

@JamieHutber - 文档中的***jestjs.io/docs/configuration#setupfilesafterenv-array。

【参考方案2】：

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

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

根据我的经验，Typescript 类型似乎从 5.x 版本中消失了

【讨论】：

您可能还需要安装类型：@types/testing-library__jest-dom

This issue 解释了为什么他们从核心中删除了类型定义。

我正在使用 react native，这也适合我吗？

@DimitriKopriwa 是的，如果您使用 Jest 进行 React Native 应用程序测试

与@Michiel 相同 - 不再需要特别指定版本 4.2.4

【参考方案3】：

eslint 覆盖没有帮助，但是

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

在求测试文件中解决了。

我从 facebook 的官方 react starter app 找到了这个答案 here 和开玩笑设置 file。希望对你有帮助。

【参考方案4】：

就我而言，这足以：

添加到 devDependencies 中的

package.json

并安装：

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

添加到

.spec

文件：

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

【讨论】：

React Native 怎么样？

【参考方案5】：

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

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

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

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

将此答案作为参考：https://***.com/a/49211283/1769777 另见jest环境配置：https://eslint.org/docs/user-guide/configuring#specifying-environments

【参考方案6】：

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

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

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

【参考方案7】：

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

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

【讨论】：

这为我解决了问题。我导入了@testing-library/jest-dom/extend-expect，但我缺少@testing-library/jest-dom。在我的例子中，该文件被命名为setup-test-env.ts，但它是您在jest.config.js 中指定为setupFilesAfterEnv 导出的任何内容。

很高兴它对你有用，@ChrisCrossCrash！ :-)

【参考方案8】：

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

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

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"

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

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

旁注：

我的设置包括使用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() 并且您的测试仍然抛出错误，您可能错过了 tsconfig.json 或 jest 配置中的有效 types 声明。李>

【参考方案9】：

请确保添加： 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"

【参考方案10】：

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

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

例如。使用

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

而不是

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

【参考方案11】：

我搞砸了几个小时，并阅读了所有问答网站。除了将@testing-library/react 和@testing-library/jest-dom 移出devDependencies 并移入dependencies 之外，没有任何效果。

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

【参考方案12】：

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

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

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

以下是tsconfig.spec.json:

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