cypress type input text test fails on material-ui / formik (react app)

Question

I have testing login submit function with cypress.

Login form is built with material-ui and formik.

I can not get 'data-testid' props on Input when I run the test.

testing code

describe('user', () => {
  beforeEach(() => {
    cy.visit('http://localhost:9080');
  });

  it('can visit login app', () => {
    cy.contains('login').click();
    cy.url().should('include', 'login');
    cy.get('[data-testid=username]').type('yuchung');
    cy.get('[data-testid=password]').type('yuchung1234');
    cy.get('button[type=submit]').click();

    cy.contains('logout');
  });
});

error message

sample code

code sample

Answer 1

As mentioned in the input docs ,you have to pass the data test prop with the inputProps prop into the input field like this : inputProps={{data-testid: 'username'}} .

This will let you access the input field with the get function you are using and will actually type the text into the input.

Hope this helps. Happy coding.

Answer 2

I would try with backticks I stead. See if it works that way..

cy.get(`[data-testid="username"]`).type('yuchung');

But If I am not mistaken formik supplies the Dom with unique names for the inputs. You can probably use them instead. Use cy.log to print the values of the formik inputs.

Or you can also, I spect the DOM, manually see if the values are printed..