create-react-app中的Web Workers:Jest错误:不能在模块外使用“import. meta”

u3r8eeie  于 2023-06-04  发布在  Jest
关注(0)|答案(1)|浏览(434)

我在用create-react-app创建的应用程序中使用https://blog.logrocket.com/web-workers-react-typescript/构建了一些简单的Web Workers。在这里,我有这样的代码:

const workerSimplerExample: Worker = useMemo(
    () => new Worker(new URL("../workers/simple-example.ts", import.meta.url), {type:"module"}),
    []
);

这将生成一个URL,无论我是在开发模式下,还是在生产模式下使用build目录,它都可以工作。然而,无论我做什么,当我运行create-react-app的基本npm testyarn test时,Jest都会抛出错误,错误是:SyntaxError: Cannot use 'import.meta' outside a module
我发现的任何解决方案(其中不多,没有一个是非常有信心的)都涉及到以create-react-app不允许的方式更改Jest或Bable设置,除非我弹出。
有没有人知道如何在不破坏Jest或弹出create-react-app的情况下在React中使用Web Workers?

avwztpqn

avwztpqn1#

为了解决这个问题,我发现我可以隔离对new URL()的调用,然后替换Jest运行时加载的文件。感谢GitHub的这篇评论。
首先,隔离new URL()。我的文件位于src/workers/simple-example-factory.ts

const getWorker = (): Worker => {
    return new Worker(new URL('./simple-example', import.meta.url));
}

export default getWorker;

然后,在src/workers/simple-example-factory.fake.ts上创建一个测试double,并使用静态文件路径。

const getWorker = (): Worker => {
    return new Worker(new URL('./simple-example', ''));
}

export default getWorker;

然后,您可以在JSX/TSX文件中获取工作的示例,如下所示:

import SimpleExampleFactory from "../workers/simple-example-factory";
...
const workerSimplerExample: Worker = SimpleExampleFactory();

**此时,worker应该仍然在浏览器中工作。**现在,要修复Jest,我们必须告诉它加载不同的文件。在使用create-react-app时,我们可以通过package.json修改Jest配置(参见文档)。

package.json

{
...
  "jest": {
    "moduleNameMapper": {
      "workers/(.*)-factory": "<rootDir>/src/workers/$1-factory.fake.ts"
    }
  },
...
}

相关问题