如何在React测试库中模拟Web Worker进行测试？

Question

I'm creating a web worker like this:

const getWebWorker = () => {
  let worker;
  if (typeof worker === 'undefined') {
    worker = new Worker('worker.js');
  }
  return worker;
};

我现在这样调用函数：

useEffect(() => {
  getWebWorker().onmessage = (event) => {
    setWorkerData(event.data);
  };
}, []);

实际的worker.js文件在public文件夹下，并且postMessage是一个对象。

我正在使用react测试库/jest进行测试。当我运行yarn run test时，我会得到错误ReferenceError: Worker is not defined，指向worker = new Worker('worker.js');。

我理解我需要模拟worker，但我对如何做感到困惑。

我应该将模拟文件命名为什么在__mock__文件夹中？

模拟worker看起来像什么？

在____.test.js文件中是否有任何需要处理的事情？

谢谢

- z0ccc

Answer 1

据我所知，Jest不支持这个。Web Workers是浏览器的东西。请改用端到端测试。

if (typeof(Worker) !== "undefined") {
  alert("Your have web worker support! (Webbrowser)")
} else {
  console.warn("You have no web worker support (node)")
}

Jest默认使用JSDOM环境，这意味着它不支持Workers。这意味着无法测试需要同时使用NodeJS功能和Web Workers的代码。jsdom-worker试图将Web Workers引入Jest，但自2020年以来没有更新，似乎未得到维护...顺便说一句，有一个衍生项目被标记为实验性质。

我也有同样的问题，并使用e2e测试playwright来测试涉及Web Workers的内容，因为我找不到生产就绪的方法来模拟Workers。点击此处。

- stefan.seeland