下面是我的代码,它提供了一个工具提示,可以在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()
  })

我一直收到错误类型错误:expect(…).toBeInTheDocument不是一个函数

有人知道为什么会这样吗?我的其他呈现和快照组件的测试都按预期进行.queryByText和queryByTestId也是如此.

推荐答案

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

然后通过以下方式将其导入测试文件:

Reactjs相关问答推荐

尽管在CLI中收到来自Stripe的OK Post请求,但没有webhook Post请求的处理- NextJS 14

如何通过TEK查询将对象传递到Express后台

为什么我无法访问窗口事件处理程序中的状态?

NextJs Form不允许我输入任何输入,

在迁移到Redux—Toolkit 2.0和Redux5.0之后,我在extraReducer和Slice方面有点挣扎,

在一个地方调用函数会影响其他地方调用该函数

安装后未渲染tailwind

有没有办法在Shopify中显示自定义计算的交货日期?

如何使数据库数据在第一次呈现时显示?

当useEffect和onClick处理程序都调用useCallback函数时,有没有办法对useEffect产生额外的影响?

无法使用Reaction日期选取器和Next.js设置初始日期

如何垂直对齐 React Bootstrap Table 行中的项目

当从子状态更改复制时,react 父状态更改.我该如何防止这种情况?

是的验证:使用 useFieldArray 访问表单值

如何在 React 中停止嵌套 Link 和 Button 组件的事件传播?

React - 如何重定向页面以显示数据修改?

使用dayjs时如何在输入类型日期时间本地字段中设置默认值?

如何通过单击多个选项中的特定项目在模态上呈现不同的标题?

将 Material UI 菜单渲染为

设置 Material UI 表格默认排序