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

javascript reactjs unit-testing jestjs react-testing-library

2022-08-30 05:27:27

下面是我的工具提示代码，用于在 MouseOver 和 Mouse Out 上切换 CSS 属性。display: blockdisplay: 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()
  })

我不断得到错误类型错误：期望（...）。toBeInDocument 不是一个函数

有没有人知道为什么会发生这种情况？我用于渲染和快照组件的其他测试都按预期工作。查询ByText和queryByTestId也是如此。

答案 1

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

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

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

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

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