Cypress中after钩子先于异步调用完成执行，如何使其真正后置执行？

问题出在你的it测试块没有告知Mocha需要等待内部的异步操作完成，Mocha会默认认为测试已结束，直接执行after钩子，而此时myAsyncFunction的回调还在异步队列中，导致输出顺序颠倒。

你可以通过以下几种方式解决：

• 返回Promise链
  在it中返回myAsyncFunction的Promise，Mocha会自动等待该Promise状态变为resolved后，再结束当前测试并执行后续钩子：

  describe('a', () => {
      after(() => {
          console.log('after call');
      });
  
      it('a', () => {
          return myAsyncFunction().then(() => {
              console.log('async call');
          });
      });
  });
  

• 使用async/await语法
  将it的回调函数改为async函数，用await等待异步操作完成，写法更简洁直观：

  describe('a', () => {
      after(() => {
          console.log('after call');
      });
  
      it('a', async () => {
          await myAsyncFunction();
          console.log('async call');
      });
  });
  

• 使用done回调（适配回调式异步）
  如果你的异步函数是基于回调而非Promise的，可以使用Mocha提供的done参数，在异步回调执行完成后调用done()，通知Mocha测试结束：

  describe('a', () => {
      after(() => {
          console.log('after call');
      });
  
      it('a', (done) => {
          myAsyncFunction(() => {
              console.log('async call');
              done();
          });
      });
  });
  

核心逻辑都是让Mocha明确感知到测试中的异步操作，等待其执行完毕后再推进到后续的钩子环节。

内容的提问来源于stack exchange，提问作者koral