Question

我有一个多页的 Formik表单，要在我的ReactJ应用程序中使用 cypress 进行测试。我想验证用户在最后一页上提交表单时所有字段均正确填写。

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

使用的命令： cy.mount（）;

cy.get（“＃id”）

Answer 1

我对使用赛普拉斯是陌生的，但这就是我测试formik组件的方式。

我将data-cy -....应用于要测试的组件。

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

一个简化的form.spec.js

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()
  })
}

它是简化的，但希望对您有所帮助。

Answer 2

您可以使用cypress-react-selector通过对组件，道具和状态的反应来轻松处理Formik表单。您无需在JSX中设置任何自定义属性，就可以通过REACT原生的方式找出元素。

您可以只使用自定义命令cy.react


  before(() => {
    cy.visit('/');
    cy.waitForReact();
  });


  it('enter data into the fields', () => {
    cy.react('MyTextInput', { field: { name: 'email' } }).type(EMAILADDRESS);
    cy.react('MyTextInput', { field: { name: 'password' } }).type(PASSWORD);
  });

有关Formik的详细示例，请访问此example-cypress-react-selector-formik

如何在Reactjs中使用cypress访问Formik表单道具

2 个答案: