Understanding the difference between invoking cy commands inside a promise in these two examples

[zakariaelas]

Hello!

Would appreciate anyone helping me wrap my head around the following two examples:

Example 1

Initially, I did something like this:

Cypress.Commands.add('customCommand', async () => {
  const check = await checkAsyncThing(region);

  if (check) {
    await doAnotherThing();
    cy.log(`did another thing`);
  }
});

Then I invoked the custom command from my test.

From the above example, I got this error:

Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.

Example 2

I tried fixing the above error by doing the following:

const asyncWork = async () => {
  const check = await checkAsyncThing(region);

  if(check) {
    await doAnotherThing()
    cy.log(`did another thing`);
  }
};

Cypress.Commands.add('customCommand', () => {
  cy.wrap(null).then(() => asyncWork());
});

This worked, but I don't really understand why. I can see that in Example 2 my custom command is no longer returning a promise (removal of async from the arrow function), however, then is also technically returning a promise in which I'm calling a cy command (cy.log).

Can you help me understand why Example 2 works, but not Example 1? Would really appreciate help building the right mental model for working with Cypress.

Thanks!