What is the best practice for waiting on search results to return from the API?

[pbrianmackey]

Given the following Cypress v10.9.0 spec:

  it('can search the database', () => {
    cy.get('[data-cy=searchInput]').type('my search');
    cy.get('[data-cy=searchOutput]').contains('Searching...');
    cy.wait(5000);
    cy.get('[data-cy=searchOutput]')
      .children('div')
      .should('have.length', 20);
  });

This test works. I am fairly new to Cypress. My question is what is the best practice for waiting on an API to return before asserting the results? I am using cy.wait(5000); which does work ok. I would prefer if the assertion would start trying immediately and fail after a timeout period. I don't see any such option. Like this:

.should('have.length', 20, {timeout: 5000});

This would give me a similar effect and be more optimized. Because the assertion could return before the timeout. The cy.wait(5000) method will always block for the full 5 seconds.

Is there a faster way to run these kinds of tests?

[pbrianmackey]

I answered my own question. Cypress supports a concept called retry-ability. Long story short, should assertion will continue to retry the assertion until it passes or the preceding command, .children() in this case, times out.