如何解决JS测试中函数调用未按书写顺序执行、被提前运行的问题？

这种执行顺序异常本质是同步代码与测试框架异步任务队列的执行优先级差异导致的：你定义的doSomething是同步函数，而// Some tests...位置的测试步骤属于异步任务，会被测试框架先加入延迟执行队列。JS运行时会优先执行所有同步代码，再按顺序处理队列里的异步任务，因此三次同步调用的doSomething日志会在测试步骤执行前全部打印完成。

根据你使用的测试框架类型，选择对应方案即可：

场景1：使用Cypress/Playwright这类带命令队列的E2E测试框架 #

这类框架的测试命令会自动进入异步队列，你只需要把doSomething调用插入到队列中即可保证顺序执行，以Cypress为例：

const doSomething = () => {
  console.log('Do something')
  // 原有逻辑保持不变
}

describe('Foo', () => {
  it('Bar', () => {
    // 第一个测试步骤示例
    cy.get('.submit-btn').click()
    // 将doSomething包装进then回调，插入异步队列
    cy.then(() => doSomething())

    // 第二个测试步骤示例
    cy.get('.form-input').type('测试内容')
    cy.then(() => doSomething())

    // 第三个测试步骤示例
    cy.url().should('include', '/success')
    cy.then(() => doSomething())
  })
})

也可以直接将doSomething注册为框架的自定义命令，调用时会自动进入异步队列，无需额外包装。

场景2：使用Jest/Mocha这类常规单元/集成测试框架 #

说明你// Some tests...位置的异步测试代码没有添加await等待执行，给测试用例加上async标记，所有异步测试步骤前补await即可：

const doSomething = () => {
  console.log('Do something')
  // 原有逻辑保持不变
}

describe('Foo', () => {
  // 给测试用例加async标记
  it('Bar', async () => {
    // 异步测试步骤前加await
    await firstAsyncTestLogic()
    doSomething()

    await secondAsyncTestLogic()
    doSomething()

    await thirdAsyncTestLogic()
    doSomething()
  })
})

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