如何测试柏树中的反应材料UI抽屉组件属性值

Question

鉴于我的React组件中的此MUI实现：

 <Box sx={{ display: 'flex' }}>
      <Drawer
        name="permDrawer"
        open={openSideDrawer}
        style={{ zIndex: -1000 }}
        variant="permanent"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <Toolbar />
        <Box>
          <List
            sx={{
              [`& .active, & .${listItemClasses.root}:hover`]: {
                color: '#2196f3',
                fontWeight: 'bold',
                fontSize: '30'
              }
            }}
          >
            <ListItem>
              <ListItemButton
                sx={{
                  minHeight: 48,
                  justifyContent: open ? 'initial' : 'center',
                  px: 2.5,
                  paddingLeft: open ? 1 : 5
                }}
              >
                <ListItemIcon>
                  <HomeOutlined />
                </ListItemIcon>
                <ListItemText primary="Dashboard" sx={{ opeacity: open ? 0 : 1 }} />
              </ListItemButton>
            </ListItem>
          </List>
        </Box>
      </Drawer>
    </Box>

IM试图测试抽屉是否打开，我可以成功开启Click事件，并且我在柏树测试跑者中看到了预期的行为。但是，我想检查抽屉组件的开放属性，因为它从false变为true，因为这是一个更准确的测试。但是，我无法访问给定的开放属性：

describe('When testing sideMenu', () => {
    
it('it should open sideMenu', () => {
  cy.readFile('./secrets/swb-shell/cypress-e2e.json').then((testConfig) => {
    cy.visit('/')

    cy.get('[data-automation-id="uname"]').type(testConfig.users[0].userid, { log: false })
    cy.get('[data-automation-id="pwd"]').type(testConfig.users[0].password, { log: false })
    cy.get('[data-automation-id="loginBtn"]').click()

    cy.get('[name="permDrawer"]').should('have.attr','open','false');
    cy.get('.MuiToolbar-root > :nth-child(1) > .MuiButtonBase-root').click()
    cy.get('.MuiDrawer-root > .MuiPaper-root').should('be.visible');
 

  })
})

}），

因为我了解它会使标记混淆，因此建议使用其他库来正确测试。我是否错过了测试中的依赖性，或者有其他方法应该解决这个问题吗？这是我第一次在赛普拉斯（Cypress）中进行测试，我还没有在3年内与React合作，因此ID非常感谢您的某些背景和帮助！ t！

Answer 1

实际上，在运行时，页面中不存在打开属性。

您可以尝试使用它是“对称的”，

cy.get('.MuiDrawer-root > .MuiPaper-root').should('be.not.visible');
cy.get('.MuiToolbar-root > :nth-child(1) > .MuiButtonBase-root').click()
cy.get('.MuiDrawer-root > .MuiPaper-root').should('be.visible');

但我认为抽屉实际上是添加/删除的，而不是使可见/看不见的，因此

cy.get('.MuiDrawer-root > .MuiPaper-root').should('not.exist');
cy.get('.MuiToolbar-root > :nth-child(1) > .MuiButtonBase-root').click()
cy.get('.MuiDrawer-root > .MuiPaper-root').should('be.visible');  // existence is implied

---

检查opensidedrawer

您可以添加自己的属性opensidedrawer

<Drawer
  name="permDrawer"
  open={openSideDrawer}
  data-cy-open={openSideDrawer}

cy.get('[name="permDrawer"]').should('have.attr','data-cy-open','false');