How to fix warning "Cypress detected that you returned a promise in a test"

Question

I'm writing a test in cypress that checks that a new item was added to the list. I don't want to hardcode the length, I'd like to confirm that the size of the list increased by one. This code works:

  beforeEach(() => {
    cy.visit('/page/1');
  });

  it('happy path comments', async function() {
    cy.get('[data-cy=commentList]').should('have.length', 1);
    const list = await cy.get('[data-cy=commentList] [data-cy=comment]');
    const beforeLength = list.length;
    cy.get('[data-cy=commentBody]').type('foobar');
    cy.get('[data-cy=submit]').click();
    cy.get('.[data-cy=commentList] [data-cy=comment]').should(
      'have.length',
      beforeLength + 1
    );
    cy.get('[data-cy=commentBody]').should('have.value', '');
  });

However, this generates the following warning:

cypress_runner.js:84852 Cypress Warning: Cypress detected that you returned a promise in a test, but also invoked one or more cy commands inside of that promise.

The test title was:

Comments happy path comments

While this works in practice, it's often indicative of an anti-pattern. You almost never need to return both a promise and also invoke cy commands.

How can I fix this warning?

Answer 1

Remove async/await from your test. Cypress commands are not promises, although behaving like promises. Read more here.

Also, you cannot assign or work with the return values of any Cypress command. Commands are enqueued and run asynchronously. What commands really return is Chainable, in other word, it's kind of queue object which resolves with the desired value. Read more here.