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

Question

这是我的工具提示代码，用于在 MouseOver 和 Mouse Out display: none 上切换 CSS 属性 display: block。

 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

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

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

Answer 2

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

安装 jest-dom：

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

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

import '@testing-library/jest-dom'

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

这对我有用:)

Answer 3

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

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

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

1. 在项目的<rootDir>（也就是package.json 和jest.config.js 所在的位置）中，确保您有一个名为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.
  };

1. 另外，请注意，如果您使用的是 typescript，则需要确保您的 jest-setup.ts 文件已编译（因此将其添加到 src 或您的 tsconfig.json 中要编译的项目列表中。

2. 在该文件的顶部：添加import '@testing-library/jest-dom';。

3. 您可能还想确保它被捕获，所以请输入console.log('hello, world!');。

4. 现在你实际上必须在控制台中安装@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 4

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

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

Answer 5

而不是做：

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

使用

只需一行就可以找到并测试它在文档中

    let element = getByText('test');

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

Answer 6

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

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