如何在Reactjs中使用cypress访问form道具

我有一个多页的Formik表单，我想在我的ReactJ应用程序中使用cypress来测试它。我想验证当用户在最后一页提交表单时，是否正确填写了所有字段

我试图挂载包含formik表单cy.mount（）的组件，它给了我这个错误“意外字符”�'”。我还尝试将id分配给formik表单，然后使用cy.get（“id”）中的id访问它

使用的命令： 赛蒙特（）

---

cy.get（“#id”）

我不熟悉使用Cypress，但这就是我测试formik组件的方式

我应用数据cy-。。。。到我正在测试的组件

<Form>  
 <Input stuff={} data-cy-form-input />
 <Button type="submit" data-cy-form-button>Submit</Button>
</Form>

---

它简化了，但希望能有所帮助。

您可以通过react组件、道具和状态轻松处理formik表单。您不需要在JSX中设置任何自定义属性，您可以用一种更自然的方式来查找元素

您只需使用自定义命令

cy.react

之前（（）=>{
cy.visit（'/'）；
cy.waitForReact（）；
});
它（'将数据输入字段'，（）=>{
cy.react（'MyTextInput'，{field:{name:'email'}}）。键入（EMAILADDRESS）；
cy.react（'MyTextInput'，{field:{name:'password'}}）。键入（密码）；
});

有关详细的Formik示例，请访问

describe('Form', () => {
  it('visits', () => { cy.visit('/login') })

  it('focuses on input', () => { cy.focused().get('[data-cy-form-input]') })

  it('accepts input', () => { 
    const text = 'Test User'
    cy.get('[data-cy-form-input]').type(text).should('have.value', text)
  })

  it('submits value', () => {
    const text = 'Test User'
    cy.get('[data-cy-form-input]').type(text)
    cy.get('[data-cy-form-button]').click()
  })
}