react-testing-library 为什么 toBeInTheDocument() 不是函数

Question

这是我的工具提示代码，可在鼠标悬停和鼠标移出时切换 CSS 属性 display: block display: none。

 it('should show and hide the message using onMouseOver and onMouseOut events respectively', () => {
    const { queryByTestId, queryByText } = render(
      <Tooltip id="test" message="test" />,
    )
    fireEvent.mouseOver(queryByTestId('tooltip'))
    expect(queryByText('test')).toBeInTheDocument()
    fireEvent.mouseOut(queryByTestId('tooltip'))
    expect(queryByText('test')).not.toBeInTheDocument()
    cleanup()
  })

我不断收到错误 TypeError: expect(...).toBeInTheDocument is not a function

有没有人知道为什么会这样？我对组件进行渲染和快照的其他测试都按预期工作。 queryByText 和 queryByTestId 也是如此。

Answer 1

toBeInTheDocument 不是 RTL 的一部分。您需要安装 jest-dom 才能启用它。

然后通过以下方式将其导入到您的测试文件中： import '@testing-library/jest-dom'

Answer 2

正如Giorgio所说，您需要安装jest-dom。这是对我有用的：

（我用的是打字稿）

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

然后将导入添加到您的 setupTests.ts

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

然后在您的 jest.config.js 中，您可以通过以下方式加载它：

"setupFilesAfterEnv": [
    "<rootDir>/src/setupTests.ts"
  ]

Answer 3

而不是做：

    expect(queryByText('test')).toBeInTheDocument()

您可以使用

仅用一行就可以找到并测试它在文档中

    let element = getByText('test');

如果通过 getBy 调用找不到元素，测试将失败。

Answer 4

当您执行 npm i @testing-library/react 时，确保有一个包含以下语句的 setupTests.js 文件

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

Answer 5

一些接受的答案基本上是正确的，但有些可能有点过时：一些目前有用的参考资料：

这里有你需要的全部东西：

在项目的 <rootDir> 中（也就是 package.json 和 jest.config.js 所在的位置），确保你有一个名为 jest.config.js 的文件，以便 Jest 可以自动获取它用于配置。该文件在 JS 中，但结构类似于 package.json.
确保输入以下内容：

  module.exports = {
    testPathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/dist'], // might want?
    moduleNameMapper: {
      '@components(.*)': '<rootDir>/src/components' // might want?
    },
    moduleDirectories: ['<rootDir>/node_modules', '<rootDir>/src'],
    setupFilesAfterEnv: ['<rootDir>/src/jest-setup.ts'] // this is the KEY
    // note it should be in the top level of the exported object.
  };

此外，请注意，如果您使用的是打字稿，则需要确保您的 jest-setup.ts 文件已编译（因此将其添加到 src 或列表要在 tsconfig.json.
中编译的项目
在 jest-setup.ts/js（或任何您想命名此入口点）文件的顶部：添加 import '@testing-library/jest-dom';.
您可能还想确保它确实运行，因此请输入 console.log('hello, world!');。您还有机会添加任何您希望在玩笑中可用的全局函数，例如 (global.fetch = jest.fn()).
现在您实际上必须在控制台中安装 @testing-library/jest-dom: npm i -D @testing-library/jest-dom。

通过这些步骤，您应该可以使用 jest-dom:

没有 TS：你还需要：

npm i -D @testing-library/jest-dom
正在创建一个 jest.config.js 并向其中至少添加：module.exports = { setupFilesAfterEnv: ['<rootDir>/[path-to-file]/jest-setup.js'] }.
正在创建一个 [path-to-file]/jest-setup.js 并向其添加：import '@testing-library/jest-dom';。

jest-setup 文件也是配置测试的好地方，例如创建特殊 renderWithProvider( 函数或设置全局 window 函数。

Answer 6

尝试了此 post 中的所有建议后，它仍然不适合我，我想提供一个替代解决方案：

安装jest-dom:

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

然后在 src 目录 中创建一个 setupTests.js 文件（这一点很重要！我把它放在根目录中，但没有工作...)。在这里，输入：

import '@testing-library/jest-dom'

（或 require(...)，如果这是您的偏好）。

这对我有用:)

Answer 7

我很难解决这个问题，所以我认为如果您在项目中使用 CREATE REACT APP，请务必注意以下几点：

你不需要 jest.config.js 文件来解决这个问题，所以如果你有，你可以删除它。
您无需更改 package.json 中的任何内容。
您必须将您的 jest 安装文件命名为 setupTests.js 并将其放在 src 文件夹下。如果您的安装文件名为 jest.setup.js 或 jest-setup.js.

Answer 8

安装所需的包

npm install --save-dev @testing-library/jest-dom eslint-plugin-jest-dom
在项目的根文件夹中创建jest-setup.js并添加

导入'@testing-library/jest-dom'
在jest.config.js

setupFilesAfterEnv: ['/jest-setup.js']
TypeScript，将以下内容添加到 tsconfig.json 文件中。此外，将 .js 扩展名更改为 .ts。

"包括": ["./jest-setup.ts"]

toBeInTheDocument()等很多类似的函数都不属于React-testing-library。它需要安装一个额外的包。

Answer 9

None 的答案对我有用，因为我犯了一个愚蠢的错误，输入了 toBeInDocument() 而不是 toBeInTheDocument()。也许其他人也犯了同样的错误:)

react-testing-library 为什么 toBeInTheDocument() 不是函数

react-testing-library why is toBeInTheDocument() not a function

javascript

unit-testing

reactjs

jestjs

react-testing-library