用反应钩形式选择的React Mui可以与Cypress一起使用

Question

在我的React应用程序中，我的表格有一个下拉列表选择。根据所选选项，呈现不同的输入。

    const [templateType, setTemplateType] = useState("");
    const {
     register,
     formState: { errors },
     setValue,
    } = useFormContext();
    ...
    <FormControl>
      <InputLabel>Template Typ</InputLabel>
      <Select id="SelectTemplateType"
        className="custom-input"
        {...register("templateType", { required: true })}
        label="Template Typ"
        value={templateType}
        onChange={(e) => setTemplateType(e.target.value)}
        error={errors.templateType}
      >
        {TEMPLATE_TYPES.map((option) => (
          <MenuItem value={option.value}>{option.label}</MenuItem>
        ))}
      </Select>
      {errors.templateType && (
        <FormHelperText sx={{ color: "#d32f2f" }}>
          Eintrag darf nicht leer sein!
        </FormHelperText>
      )}
    </FormControl>
    <TemplateFormSwitch templateType={templateType} />

TemplateFormSwitch根据所选的TemplateType返回不同​​的形式组件。
我正在使用form-provider和useformContext的react-hook-form，因为我的表单在多个组件/文件上拆分。

我尝试通过首先单击“选择”，然后单击所需的选项来编写柏树测试：

    cy.get('#SelectTemplateType').click({ force: true })
    cy.get('[data-value="Text"]').click({ force: true });
    //Entering Test values to TextFields
    cy.get('#mui-1').type("Test");
    cy.get('#mui-2').type("HelloWorld");

然后，当我尝试提交我的表单时，所有Textfields都会正确验证。但是以某种方式使用TemplateType选择了选择并未验证，并且提交操作被阻止。

奇怪的是，当我在应用程序中手动单击时，所有内容都可以正常工作，并且TemplateType Select可以正确验证。

我需要做些什么/更改才能正确测试MUI正确选择并触发React-Hook-form-form验证，就像我手动测试一样？

Answer 1

有时，命令的JavaScript代码使用不足以触发验证检查。

用户将集中精力并模糊每个字段，因此您也可以做到这一点

it("form test", () => {
  cy.visit("http://localhost:3000");

  cy.get('[href="/form"] > .MuiListItem-root > .MuiListItemButton-root')
    .click();

  cy.get("#SelectGenderType").click();
  cy.get('[data-value="m"]').click()
  cy.get("#SelectGenderType").focus().blur()

  cy.get("form > :nth-child(1) > :nth-child(2)").type("Max");
  cy.get("form > :nth-child(1) > :nth-child(3)").type("Mustermann");

  cy.get(".MuiButton-root")
    .click();

  cy.contains('p', 'Field cannot be empty!').should('not.exist')    // ✅ passes
});

Answer 2

我克隆了您的仓库并进行了测试，但是对我来说，没有产生的错误。我运行了确切的脚本。

describe('my test spec', () => {
  it('form test', () => {
    cy.visit('http://localhost:3000')

    cy.get(
      '[href="/form"] > .MuiListItem-root > .MuiListItemButton-root'
    ).click()

    cy.get('#SelectGenderType').click()

    cy.get('[data-value="m"]').click()

    cy.get('form > :nth-child(1) > :nth-child(2)').type('Max')
    cy.get('form > :nth-child(1) > :nth-child(3)').type('Mustermann')

    cy.get('.MuiButton-root').click()
  })
})

测试跑步者的屏幕快照：