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

IT技术 reactjs testing jestjs mocha.js
2021-03-24 02:55:21

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

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

});

任何有关我如何解决此问题的建议表示赞赏。

6个回答

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

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

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

您可能还需要安装以下类型： @types/testing-library__jest-dom
2021-05-27 02:55:21
我正在使用 react native，这也适合我吗？
2021-05-30 02:55:21
这个问题解释了为什么他们从核心中删除了类型定义。
2021-05-31 02:55:21
@DimitriKopriwa 是的，如果您使用 Jest 进行 React Native 应用程序测试
2021-06-14 02:55:21
与@Michiel 相同 - 不再需要特别指定版本 4.2.4
2021-06-20 02:55:21

上面的大多数解决方案似乎都解决了 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，甚至可以切换到。

@JjagweDennis 是的，改写了
2021-06-02 02:55:21
ts-jest如果没有babel-jest它需要额外的设置，这是不可行的。这样做你会得到：SyntaxError: Cannot use import statement outside a module
2021-06-07 02:55:21
这为我解决了，谢谢！
2021-06-15 02:55:21
面临找不到 toBeVisible() 的问题（TS2339：属性 'toBeVisible' 在类型“JestMatchersShape<Matchers<void, any>, Matchers<Promise<void>, any>>”上不存在）。导入 jest-dom/extend-expect 解决了它。
2021-06-16 02:55:21
不"types": ["node", "jest", "@testing-library/jest-dom"]应该在 ts-configs 中吗？
2021-06-18 02:55:21

eslint 覆盖没有帮助，但是 

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

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

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

就我而言，这足以：

  • 添加到devDependencies 中的package.json并安装：
"@testing-library/jest-dom": "^5.11.9",
  • 添加到.spec文件：
import '@testing-library/jest-dom';
react-native怎么样？
2021-06-03 02:55:21

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

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

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

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

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

其它你可能感兴趣的问题
上一篇Jest 模拟react上下文 下一篇在 React 16.2 中出现意外令牌错误的片段