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

Posted 2023-02-19

【中文标题】react-testing-library 为啥 toBeInTheDocument() 不是函数

【英文标题】：react-testing-library why is toBeInTheDocument() not a functionreact-testing-library 为什么 toBeInTheDocument() 不是函数

【发布时间】：2019-10-26 02:00:04

【问题描述】：

这是我的工具提示代码，用于在 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 也是如此。

【问题讨论】：

我已经为那些在没有babel-jest 的情况下使用ts-jest 并且没有任何效果的人发布了详细的答案。我希望它会有所帮助：***.com/a/66708479/2170368

【参考方案1】：

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

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

【参考方案2】：

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

安装 jest-dom：

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

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

import '@testing-library/jest-dom'

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

这对我有用:)

【参考方案3】：

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

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

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

在项目的<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$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.
  ;

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

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

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

现在你实际上必须在控制台中安装@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( 函数或设置全局窗口函数。

【参考方案4】：

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

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

【参考方案5】：

而不是做：

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

使用

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

    let element = getByText('test');

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

【参考方案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"
  ]

【讨论】：

ESLint 抱怨 jest.config.js 语法？

我觉得你需要把它嵌套在module.exports = ...

Jest 在上述解决方案中运行良好，但 VSCode 仍然在抱怨（类型上不存在属性“toBeInTheDocument”...），所以我不得不安装类型：yarn add @types/testing-library__jest-dom --dev

【参考方案7】：

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

【讨论】：

你如何导入它，你可以在这里提供完整的答案......

@EugenSunic 只需使用import '@testing-library/jest-dom'

@Cog ，总是这样吗？

In Create React App import '@testing-library/jest-dom' 将在 setupTests.ts 中。从较旧的 Create React App 升级时，您需要创建 setupTests.ts。见github.com/facebook/create-react-app/blob/master/packages/…