React+Cypress测试中Checkbox点击后自动取消选中的问题

问题描述 #

在使用Cypress测试React+Material UI项目的列表项复选框时，出现选中后立即取消选中的异常，尝试以下方法均未解决：

尝试过的代码 #

// 点击复选框容器
cy.get('[test-id="A02-checkbox"]').click({force: true})

// 直接勾选input元素
cy.get('[test-id="A02-checkbox"] input[type="checkbox"]').check({force: true});

// 手动设置checked属性并触发change事件
cy.get('[test-id="A02-checkbox"] input[type="checkbox"]').then($input => {
  $input.prop('checked', true);
  $input.trigger('change');
});

// 点击列表项
cy.contains('.MuiListItem-root', 'A02').click({force: true});

对应DOM结构 #

<li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1vamrk7-MuiListItem-root" style="position: absolute; left: 0px; top: 0px; height: 50px; width: 100%">
  <div class="MuiListItemIcon-root css-qklaqr-MuiListItemIcon-root">
    <span class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium css-sh4u9g-MuiButtonBase-root-MuiCheckbox-root" test-id="A02-checkbox">
      <input class="PrivateSwitchBase-input css-1m9pwf3" tabindex="-1" type="checkbox" data-indeterminate="false" />
      <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CheckBoxOutlineBlankIcon">
        <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
      </svg>
    </span>
  </div>
  <div class="MuiListItemText-root css-tlelie-MuiListItemText-root">
    <span class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-qjcyq6-MuiTypography-root">A02</span>
  </div>
</li>

可行解决方法 #

1. 等待React状态同步后操作 #

React状态更新是异步的，直接操作DOM可能被重渲染覆盖，需等待组件状态稳定：

cy.get('[test-id="A02-checkbox"]')
  .should('be.visible')
  .click({force: true})
// 验证复选框已选中，强制等待状态同步
cy.get('[test-id="A02-checkbox"] input[type="checkbox"]')
  .should('be.checked');

2. 点击视觉上的复选框图标 #

Material UI的Checkbox视觉交互区域是SVG图标，点击该区域更贴近真实用户操作：

cy.get('[test-id="A02-checkbox"] svg')
  .click({force: true})
cy.get('[test-id="A02-checkbox"] input[type="checkbox"]')
  .should('be.checked');

3. 模拟完整列表项交互 #

如果列表项绑定了选中逻辑，确保点击后等待状态同步：

cy.contains('.MuiListItem-root', 'A02')
  .should('be.visible')
  .click({force: true})
cy.get('[test-id="A02-checkbox"] input[type="checkbox"]')
  .should('be.checked');

4. 直接更新React状态（终极方案） #

若以上方法无效，可直接操作React状态管理工具（如Redux）更新选中状态：

cy.window().then(window => {
  // 根据项目实际状态管理方式修改，示例为Redux dispatch
  window.store.dispatch({
    type: 'TOGGLE_CHECKBOX',
    payload: {id: 'A02', checked: true}
  });
});
cy.get('[test-id="A02-checkbox"] input[type="checkbox"]')
  .should('be.checked');

5. 排查事件干扰 #

检查是否有防抖、节流或其他监听事件重置复选框，可通过Cypress Spy监听事件：

cy.get('[test-id="A02-checkbox"] input[type="checkbox"]')
  .then($input => {
    cy.spy($input[0], 'addEventListener').as('changeSpy');
  });
cy.get('[test-id="A02-checkbox"]').click({force: true});
cy.get('@changeSpy').should('have.been.called');

内容的提问来源于stack exchange，提问作者Mamunur Rashid