使用cypress-react-selector定位MUI MenuItem失败求助

核心原因 #

用props: {value: option}匹配时，由于option是对象，cypress-react-selector会做引用相等比较，但组件上的value对象和你传入的option是不同引用，因此匹配失败。

解决方案 #

1. 使用函数式props匹配（推荐） #

通过自定义函数做值层面的匹配，替代引用匹配：

import 'cypress-react-selector';
Cypress.Commands.add('filterSection', (option: any) => {
  cy.react('MenuItem', {
    props: (props) => props.value?.id === option.id
  }).click()
})

只要MenuItem的value.id和传入的option.id一致，就能精准匹配到目标组件。

2. 确保MenuItem已渲染 #

点击MenuItem前，必须先展开下拉菜单，让MenuItem挂载到DOM中：

// 先触发下拉菜单展开
cy.react('Select').click()
// 再调用自定义命令点击目标项
cy.filterSection({id: 123})

3. 检查组件displayName #

确认MUI MenuItem的displayName为MenuItem（默认是该值），如果项目中对组件做了二次封装，需改成封装后的组件名称，比如CustomMenuItem。

4. 直接用DOM属性匹配（备选） #

如果react组件选择方式不生效，可以直接基于DOM属性定位：

// 通过data-value属性匹配（需确认DOM上存在该属性）
cy.get(`[data-value='{"id":123}']`).click()
// 或通过菜单项文本匹配
cy.contains('目标菜单项的文本内容').click()

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