Question

我正在尝试为我的简单React应用编写测试，该应用使用API等为狗舍创建UI。我已导入以下所示的模块并运行以下命令

.orderBy()

但是我正在获取toBeInTheDocument（）;方法加红色下划线并显示错误消息

setCurrentUser: async context => {
    let ref = db.collection('users').orderBy('events')
    let snapshot = await ref.where('user_id', '==', firebase.auth().currentUser.uid).get()
    const users = []
    snapshot.forEach(doc => {
        let currentUserData = doc.data()
        currentUserData.id = doc.id
        users.push(currentUserData)
    })
    context.commit('setCurrentUser', users)
},

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

我能解决这个问题的任何建议都值得赞赏。

Answer 1

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

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

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

Answer 2

以上大多数解决方案似乎都可以解决Babel或Eslint。如果您在使用tslint和纯Typescript时遇到问题，只需在类型中添加@testing-library/jest-dom

因此在您的Jest配置中：

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

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

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

，然后在文件setupTests.js中：

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

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

Answer 3

eslint覆盖没有帮助，但是

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

请测试文件解决。

我找到了这个答案here，也是在Facebook官方file的笑话设置react starter app中找到的。希望对您有所帮助。

Answer 4

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

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

"**/*.test.js"是与您的测试文件格式匹配的全局名称。

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

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

Answer 5

就我而言，这足以：

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

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

添加到 .spec 文件：

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

Answer 6

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

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

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

使用 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"
]
...

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

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

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

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

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

旁注：

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

Answer 7

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

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

由于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"
  ]
}

Answer 9

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

在 Enzyme 文档示例中使用了 chai 断言。取而代之的是，我们必须使用 jest 断言。

例如。使用

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

代替

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

Answer 10

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

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

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

10 个答案: