Cypress Quick Tip: Waits

One thing you will want to do very often when testing a React or Vue UI is waiting for the view to do something. The big use case here is waiting for an API response so that your UI can display the way you expect and you can run your assertions against the resultant UI.

You could set a global wait but then all your tests would be affected. You could set an explicitly wait but that's bound to be flaky. What you should do instead is lean on Cypress. Use an .as('foo') and then call a cy.wait('@foo').

You can use this for stubbed out fixture calls and also in an end to end test suite against a real API call.

context('first run', () => {
  specify('our app loads and hits and endpoint and shows us stuff', () => {
    cy.server();
    cy.route('GET', '/api/home', 'fixture:basic')
      .as('home');
    cy.visit('/');
    cy.wait('@home');
    cy.get('.user')
      .should('be.visible');
  });
});

Check out the official docs for more info! Happy testing!