如何等待WebSocket连接完成后再终止函数 解决Jest测试报错问题

你当前编写的是同步函数，WebSocket的onopen/onclose/onerror都属于异步事件回调，会等待当前同步代码执行完毕后才会触发，因此函数返回时变量a还没有被赋值，自然会导致Jest断言报错。同时不要使用while循环阻塞等待状态变化，JS为单线程事件循环模型，阻塞主线程会导致所有异步回调永远无法执行，直接卡死程序。

第一步：改造状态检测函数为异步Promise形式 #

将状态结果通过Promise抛出，等待异步事件触发后再结束函数执行：

function checkServerStatus(timeout = 3000) {
  return new Promise((resolve) => {
    const ws = new WebSocket('ws://127.0.0.1:8080');
    // 超时兜底，避免服务无响应时测试卡死
    const timeoutTimer = setTimeout(() => {
      ws.close();
      resolve(ws.readyState);
    }, timeout);

    ws.onopen = () => {
      clearTimeout(timeoutTimer);
      const currentState = ws.readyState;
      ws.close();
      resolve(currentState);
    };

    ws.onclose = () => {
      clearTimeout(timeoutTimer);
      resolve(ws.readyState);
    };

    ws.onerror = () => {
      clearTimeout(timeoutTimer);
      resolve(ws.readyState);
    };
  })
}

第二步：Jest异步测试写法 #

Jest原生支持异步测试，使用async/await等待Promise返回结果后再执行断言即可：

test('验证WebSocket服务端状态', async () => {
  const finalState = await checkServerStatus();
  // 状态只能为1（OPEN）或3（CLOSED）
  expect([1, 3]).toContain(finalState);
});

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