如何使用 Cypress 测试 React Material UI“选择”

Question

我正在映射 Carsdata，它是 json。无法在 cypress 中测试这一点。

尝试过：

cy.get(#any-make-dropdown).select('chevroletMalibu')

以及其他选择。

<FormControl sx={{ m: 1,width: 300, bgcolor: 'whitesmoke' }}>
        <InputLabel id="demo-simple-select-label">Any Make</InputLabel>
        <Select
          id="any-make-dropdown"
          value={value}
          label="Any Make"
          onChange={handleChange}
        >

          {Carsdata.map((c) => (
              <MenuItem key={c.Id} value={c.Name}>
                {c.Name}
              </MenuItem>
          ))}

        </Select>
</FormControl>

<FormControl sx={{ m: 1,width: 300, bgcolor: 'whitesmoke' }}>
        <InputLabel id="demo-simple-select-label">Any Make</InputLabel>
        <Select
          id="any-make-dropdown"
          value={value}
          label="Any Make"
          onChange={handleChange}
        >

          {Carsdata.map((c) => (
              <MenuItem key={c.Id} value={c.Name}>
                {c.Name}
              </MenuItem>
          ))}

        </Select>
</FormControl>

Answer 1

React 正在将标记转换为<div>而不是<select>所以cy.select()不起作用。

通过点击，

cy.get('#any-make-dropdown').click()
cy.contains('chevroletMalibu').click()
cy.get('#any-make-dropdown').should('contain', 'chevroletMalibu')