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

Question

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

原文由 dorriz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Giorgio Polvara - Gpx 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Jafin 发布，翻译遵循 CC BY-SA 4.0 许可协议