我在用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 test
或yarn test
时,Jest都会抛出错误,错误是:SyntaxError: Cannot use 'import.meta' outside a module
我发现的任何解决方案(其中不多,没有一个是非常有信心的)都涉及到以create-react-app不允许的方式更改Jest或Bable设置,除非我弹出。
有没有人知道如何在不破坏Jest或弹出create-react-app的情况下在React中使用Web Workers?
1条答案
按热度按时间avwztpqn1#
为了解决这个问题,我发现我可以隔离对
new URL()
的调用,然后替换Jest运行时加载的文件。感谢GitHub的这篇评论。首先,隔离
new URL()
。我的文件位于src/workers/simple-example-factory.ts
然后,在
src/workers/simple-example-factory.fake.ts
上创建一个测试double,并使用静态文件路径。然后,您可以在JSX/TSX文件中获取工作的示例,如下所示:
**此时,worker应该仍然在浏览器中工作。**现在,要修复Jest,我们必须告诉它加载不同的文件。在使用create-react-app时,我们可以通过
package.json
修改Jest配置(参见文档)。package.json