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

【问题标题】：How to access Formik form props using cypress in Reactjs如何在 Reactjs 中使用 cypress 访问 Formik 表单道具
【发布时间】：2019-11-18 17:35:35
【问题描述】：

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

我尝试安装包含 formik 表单 cy.mount() 的组件，它给了我这个错误“Unexpected character '�'”。我还尝试将 id 分配给 formik 表单，然后使用 cy.get("#id") 中的 id 访问它。

使用的命令： cy.mount();

cy.get("#id")

【问题讨论】：

标签： reactjs cypress react-props formik

【解决方案1】：

您可以使用 cypress-react-selector 通过 react 组件、道具和状态轻松处理 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

【讨论】：

【解决方案2】：

我是使用 Cypress 的新手，但这是我测试 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()
  })
}

已简化，但希望对您有所帮助。

【讨论】：