reactjs - 如何使用 Cypress 测试 React Material UI "Select"

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>

// Carsdata.json 
[
    {
        "Id": 1,
       "Name":"chevroletMalibu",
       "Miles_per_Gallon":18,
       "Cylinders":8,
       "Displacement":307,
       "Horsepower":130,
       "Weight_in_lbs":3504,
       "Acceleration":12,
       "Year":"1970-01-01",
       "Origin":"USA"
    },
    {
        "Id": 2,
       "Name":"buickSkylark",
       "Miles_per_Gallon":15,
       "Cylinders":8,
       "Displacement":350,
       "Horsepower":165,
       "Weight_in_lbs":3693,
       "Acceleration":11.5,
       "Year":"1972-01-01",
       "Origin":"USA"
    },
    {
        "Id": 3,
       "Name":"plymouthSatellite",
       "Miles_per_Gallon":18,
       "Cylinders":8,
       "Displacement":318,
       "Horsepower":150,
       "Weight_in_lbs":3436,
       "Acceleration":11,
       "Year":"1973-01-01",
       "Origin":"USA"
    },
    {
        "Id": 4,
       "Name":"amcRebel",
       "Miles_per_Gallon":16,
       "Cylinders":8,
       "Displacement":304,
       "Horsepower":150,
       "Weight_in_lbs":3433,
       "Acceleration":12,
       "Year":"1974-01-01",
       "Origin":"USA"
    },
    {
        "Id": 5,
       "Name":"ford torino",
       "Miles_per_Gallon":17,
       "Cylinders":8,
       "Displacement":302,
       "Horsepower":140,
       "Weight_in_lbs":3449,
       "Acceleration":10.5,
       "Year":"1975-01-01",
       "Origin":"USA"
    }
]

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')