如何测试 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>

// 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 正在将标记转换为

而不是 ，因此 cy.select() 不起作用。

通过点击，

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

Answer 2

该解决方案类似于我的此处的答案，但适用于 Material-UI v5。

赛普拉斯文档建议分配一个唯一的数据- cy 属性是 Cypress 应与之交互的元素，因此您应该对 Select、其 inputProps 及其每个 MenuItem 执行此操作。

组件：

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

    {Carsdata.map((c) => (
      <MenuItem data-cy={`select-option-${c.Id}`} key={c.Id} value={c.Name}>
        {c.Name}
      </MenuItem>
    ))}

  </Select>
</FormControl>

Cypress 测试：

it("should change value of select box", () => {
  /** Confirm that the select box is empty by default */
  cy.get(`[data-cy = "any-make-dropdown-input"]`).should(`have.value`, ``);

  /** Click on the select box, then on the option */
  cy.get(`[data-cy = "any-make-dropdown"]`).click();
  cy.get(`[data-cy = "select-option-2"]`).click();

  /** Assert the new value of the select box */
  cy.get(`[data-cy = "any-make-dropdown-input"]`).should(`have.value`, `buickSkylark`);
});

Answer 3

const ServiceType = [
{ id: 'AmbulanceCustomer', title: 'Ambulance User' },
{ id: 'PoliceCustomer', title: 'Police User' },
{ id: 'FireCustomer', title: 'Fire User' },
{ id: 'FarmacyCustomer', title: 'Farmacy User' }

]

< Form onSubmit = { handleSubmit } data-cy="form" >
    <Grid container spacing={6} data-cy="grid1">
        <Grid item lg={6} md={6} sm={12} xs={12} sx={{ mt: 2 }} data-cy="grid2">

            <div data-cy="service_type">
                <Controls.Select
                    name="service_type"
                    label="User Type"
                    options={ServiceType}
                    value={values.service_type}
                    onChange={handleInputChange}
                    error={errors.service_type}
                />
            </div>
        </Grid>
    </Grid>
 </Form >

cy.get('[data-cy^="form"]').get('[data-cy^="grid1"]').get('[data-cy^="grid2"]').get('[data-cy^="service_type"]')
    .get('[name="service_type"]').get('#mui-component-select-service_type', { force: true }).type("Ambulance User{enter}"), { force: true }