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

IT技术 javascript reactjs unit-testing jestjs react-testing-library
2021-05-03 10:02:36

这是我的工具提示代码，用于display: block在 MouseOver 和 Mouse Out 上切换 CSS 属性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 也是如此。

4个回答

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

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

（我正在使用typescript）

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"
  ]

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

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

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

安装 jest-dom：

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

然后创建一个setupTests.js在文件src目录（这一点是很重要的！我有它的根目录，这确实不工作...）。在这里，放：

import '@testing-library/jest-dom'

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

这对我有用:)

其它你可能感兴趣的问题
上一篇如何在 React 和 typescript 中的 style 属性中定义 css 变量 下一篇哪种 3D 打印机可以打印扫描的尸体？