Reactjs cypress 不能点击SPAN

发布于02月09日

在我的React.js代码中，我有以下内容:

        <span 
            onClick={addToList} 
            className='ms-2 pt-2' 
            title='Adding a new row.'
            data-testid='t-editableListItem-add'>
            <BsFilePlus size={25} role='button' />
        </span>

在单元测试中，可以点击span:

await userEvent.click(screen.getByTestId('t-editableListItem-add'));

但是在Cypress(13.6.4)中，我不能做同样的事情:

    cy.findByTestId('t-editableListItem-add').click();

或

    cy.findByTestId('t-editableListItem-add').findByRole('button').click();

neither of them w或ks.

I've even tried the realClick() from https://github.com/dmtrKovalenko/cypress-real-events but it didn't help.

你知道我做错了什么吗？

推荐答案

如果userEvent.click(...)在单元测试中适合您，您还可以将其导入到Cypress测试中并在那里使用它.

您只需要为它提供DOM元素，该元素可以通过生成的jQuery对象从Cypress查询中获得.

import userEvent from '@testing-library/user-event'
// also requires install of @testing-library/dom

it('clicks a button using userEvent', () => {

  cy.get('[data-testid="t-editableListItem-add"]')
    .then($span => {
      const element = $span[0]
      userEvent.click(element)
    })
})

缺少事件侦听器

如果这不起作用，问题可能是在您的Cypress测试try 单击时，事件处理程序没有附加.

有关此问题的详细信息，请参阅When Can The Test Click.

测试可以使用cypress-cdp包附带的hasEventListeners command来等待事件侦听器.

it('clicks a button using userEvent', () => {

  // wait for the event listener to be attached
  cy.hasEventListeners('[data-testid="t-editableListItem-add"]', { type: 'click' })

  cy.get('[data-testid="t-editableListItem-add"]').click()
})

Reactjs cypress 不能点击SPAN

推荐答案

缺少事件侦听器

Reactjs相关问答推荐

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

根据另一个Select中的选定值更改Select中的值

NextJS如何正确保存添加到购物车中的产品会话

获取未捕获的错误：Gatsby生产版本上的最小化react 错误#418

是否为Reaction中未使用的组件生成Tailwincss样式？

React组件未出现

使用experial_useFormState将参数传递给服务器操作

无法在 NextJS 中获取嵌套对象

画布：用鼠标绘制形状时重新绘制整个画布会导致卡顿

useRef 不关注模态

在react的useEffect钩子中，我的函数被调用，但只有第一个函数能够改变状态，第二个函数无法改变状态.

从 React 应用程序调用未经身份验证的 graphql 查询时出现错误：没有当前用户

使用 nextjs App Router 在动态客户端进行服务器端渲染

React Native应用如何订阅Supabase的实时数据？

表单错误后 Ionic React 无法 Select 单选按钮

如何修复 Next.js 13 中类型 AppRouterInstance 上不存在 x？

如何在 JSX 中使用 -webkit- 前缀？

列表应该有一个唯一的关键props

为什么我在运行一些 npm react 命令时会收到这些警告？

单击按钮时获取react 表中每一行的属性