react-testing-library为什么toBeInTheDocument（）不是函数

Question

谁能帮我，我真的很坚持。这是我的工具提示代码，可切换css属性显示：MouseOver和Mouse Out显示上的块：无

 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不是一个函数

有谁知道为什么会这样吗？我用于渲染和快照组件的其他测试均按预期工作。就像queryByText和queryByTestId一样。

谢谢

Answer 1

正如 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 2

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

• https://github.com/testing-library/jest-dom
• https://jestjs.io/docs/configuration

以下是您需要的全部内容：

1. 在项目的<rootDir>（又名 wherepackage.json和jest.config.jsare）中，确保您有一个名为的文件jest.config.js，以便 Jest 可以自动选择它进行配置。该文件采用 JS 格式，但结构与 package.json 类似。
2. 确保您输入以下内容：

  module.exports = {
    testPathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/dist'], // might want?
    moduleNameMapper: {
      '@components(.*)': '<rootDir>/src/components$1' // 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.
  };

3. 另请注意，如果您使用 typescript，则需要确保您的jest-setup.ts文件已编译（因此将其添加到src或添加到要在tsconfig.json.

4. jest-setup.ts/js在文件（或任何您想命名此入口点的名称）的顶部：添加import '@testing-library/jest-dom';.

5. 您可能还想确保它确实运行，因此将console.log('hello, world!');. 您还可以添加任何您希望在笑话中可用的全局函数，例如 ( global.fetch = jest.fn())。

6. 现在你实际上必须在控制台中安装@testing-library/jest-dom: 。npm i -D @testing-library/jest-dom

通过这些步骤，您应该准备好使用 jest-dom：

没有 TS：您仍然需要：

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

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

Answer 3

在尝试了这篇文章中的所有建议后，它仍然对我不起作用，我想提供一个替代解决方案：

安装 jest-dom：

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

然后在src 目录中创建一个setupTests.js文件（这一点很重要！我将它放在根目录中，但这不起作用......）。在这里，输入：

import '@testing-library/jest-dom'

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

这对我有用:)

Answer 4

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

导入'@testing-library/jest-dom/extend-expect';

Answer 5

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

Answer 6

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

1. 您不需要jest.config.js文件来解决此问题，因此如果您有文件，可以将其删除。
2. 您不需要更改 中的任何内容package.json。
3. 您必须命名您的笑话安装文件setupTests.js并将其放在该src文件夹下。jest.setup.js如果您的安装文件被称为或，它将不起作用jest-setup.js。

Answer 7

toBeInTheDocument不属于RTL。您需要安装jest-dom才能启用它。

Answer 8

如果你还没有安装 jest-dom，你需要使用下面的命令安装它。

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

在项目文件夹的根目录中创建一个文件并将其命名为 jest-setup.js。您的文件应具有以下内容。

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

在您的 package.json 中，将以下代码添加到您的 jest 配置中；

"jest": {
    "setupFilesAfterEnv": ["<rootDir>/jest-setup.js"]
}

Answer 9

1. 安装所需的包

   npm install --save-dev @testing-library/jest-dom eslint-plugin-jest-dom

2. jest-setup.js在项目的根文件夹中创建并添加

   import '@testing-library/jest-dom'
   

3. 在jest.config.js

   setupFilesAfterEnv: ['<rootDir>/jest-setup.js']
   

4. TypeScript只需将以下内容添加到文件中tsconfig.json。另外，将 .js 扩展名更改为 .ts。

   "include": ["./jest-setup.ts"]
   

toBeInTheDocument()并且许多类似的功能并不属于React-testing-library. 它需要安装额外的软件包。