Reactjs 财产'；提交文件'；不存在于类型'；Matchers<；任何>'；

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

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

然而，我正在得到toBeInTheDocument（）；方法以红色下划线，并显示错误消息

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

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

import“每次测试后反应测试库/清理”；
导入“jest dom/extend expect”；
从“React”导入*作为React；
从“/PetCard”导入PetCard；
从“/Pet”导入宠物；
从“反应测试库”导入{render}；
常数petMock={
id:“225c5957d7f450baec75a67ede427e9”，
名称：“Fido”，
状态：“可用”，
种类：“狗”，
品种：“拉布拉多”，
}作为宠物；
描述（“PetCard”，（）=>{
它（“应该呈现名称”，（）=>{
const{getByText}=render（）；
expect（getByText（“Fido”））.toBeInTheDocument（）；
});
});

---

对于如何解决此问题的任何建议，我们都非常感谢。

如评论中所述，需要更改的是您的eslint配置。您应该更新

eslintrc

文件，以包含测试文件的配置覆盖：

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

其中，

“***.test.js”

是与测试文件格式匹配的glob

更改

eslintrc

文件可确保不必在每个测试文件的顶部添加

eslint env

注释

请参阅此答案作为参考：

---

另请参阅jest环境配置：

请确保项目中安装了正确的类型。i、 e

npmi-D@testing library/jest dom@^4.2.4

---

根据我的经验，5.x版似乎缺少类型脚本类型。eslint覆盖没有帮助，但是

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

在乞讨中，测试文件解决了它

我找到了这个答案，也从facebook的官方网站上找到了这个笑话。希望能有所帮助。

请确保添加：

import“@测试库/jest-dom/extend-expect”

之后：

从“@testing library/react”导入{render}

---

上述大多数解决方案似乎都能解决Babel或Eslint问题。如果您对

tslint

和纯Typescript有这样的问题，那么将：

@testing library/jest dom

添加到您的类型就足够了

因此，在typescript配置中：

//tsconfig.json

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

还请记住，你应该把这个图书馆包括在笑话里。与其在每个文件中导入，不如在配置文件中导入：

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

---

如果直接使用TypeScript，甚至可以切换到

require（）

。

最新版本的

@testing library/jest dom

（例如

5.11.2

）开箱即用，对我来说，问题是由cypress类型与

@testing library

使用的

@types/chai

冲突引起的：

由于Chai和jQuery是名称空间（globals），不兼容的版本将导致包管理器（warn或npm）嵌套并包含多个定义，并导致冲突

通过在顶级TS配置中不包含

cypress

文件夹，而是添加

cypress/tsconfig.json

，解决了此问题：

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

---

如果在将

Enzyme

与

Jest

集成时出现此错误，请确保使用

Jest

断言方法

在

Enzyme

文档中，使用了示例

chai

断言。相反，我们必须使用

jest

断言

例：使用

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

而不是

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

---

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

如果您使用

babel jest

进行翻译，则所选答案通常是正确的

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

• 类型“JestMatchers”上不存在属性“toBeInTheDocument”。

• 如果您试图在jest.afterEnv文件中添加

  import

  ，则会导致

  无法在模块外部使用import语句

使用babel解决此问题可能会导致如下问题：

无法在模块之外使用import语句

，因为这两个语句的工作方式不同。所以，如果您想纯粹使用

ts jest

来解决这个问题（这意味着在jest配置中，您有类似的行）：

普通答案中的任何内容都不起作用，然后按照以下步骤操作：

显而易见，请使用以下方法安装

@testing library/jest dom

：

添加类型

到

tsconfig.json

与上面类似

在

jest.config.js

config中添加以下内容：

现在，检查

jest.config.js

中的

根：[“/src”]，

路径

• 在该路径中创建一个名为

  globals.d.ts

  的新文件
• 确保它与

  tsconfig.json中的
  “included”
  regex匹配

• 粘贴到

  globals.d.ts

  下一行：

不要将此行附加到

ts jest

traspiler的postEnv jest设置

运行测试并享受结果

旁注：

• 我的设置包括使用

  jest

  进行API测试，使用

  jest

  进行E2E的

  supertest

  测试，使用

  react testing library

  进行react测试的jest，以及使用堆栈中的

  react testing library

  进行浏览器

  testcafe

  测试，现在一切都正常了，所以不要放弃
• 确保在您的

  jest.config.js

  中涵盖了所有扩展，即

  moduleFileExtensions:[“ts”、“tsx”、“js”、“jsx”、“json”、“node”]

  ，尤其是当您试图运行

  .tsx

  测试时
• 如果在此过程中VSCode将停止以红色突出显示toBeInTheDocument（），并且您的测试仍然抛出错误，则您可能错过了

  TSConfig中的有效
  类型
  声明
  {
    "extends": "../tsconfig.json",
    "compilerOptions": {
      "baseUrl": "../node_modules",
      "types": ["cypress"]
    },
    "include": [
      "**/*.ts"
    ]
  }
  
  expect(wrapper.find(Foo)).toHaveLength(3);
  
  expect(wrapper.find(Foo)).to.have.lengthOf(3);
  
  import '@testing-library/jest-dom/extend-expect';
  import '@testing-library/jest-dom';
  
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  
  npm install --save-dev @testing-library/jest-dom
  
  "types": ["node", "jest", "@testing-library/jest-dom"]
  
  ...
  setupFilesAfterEnv: [
    "@testing-library/jest-dom/extend-expect"
  ]
  ...
  
  import "@testing-library/jest-dom/extend-expect"
  
  "@testing-library/jest-dom": "^5.11.9",
  
  import '@testing-library/jest-dom';