reactjs - Web Worker - Jest - 无法在模块外使用“import.meta”
问题描述
我正在开发一个nextjs 10.1.3
内置的 Web 应用程序。我们实施了一个 web worker 来提高其中一个页面的性能,并且计划继续添加更多的 worker;此外,所有代码都经过了适当的单元测试,并且使用worker-loader
之前的 webpack 版本(第 4 版及以下)我们能够对其进行测试。
使用新的 webpack 5 版本,worker-loader
不再需要该插件;相反,使用新版本加载 web worker 的方式是new Worker(new URL("@/workers/task.worker.js", import.meta.url));
.
这样做,我的代码按预期工作npm build && npm start
;然而,当我尝试添加相应的单元测试时,我得到了以下错误:Cannot use 'import.meta' outside a module
一切都发生了,因为import.meta.url
用于在浏览器中添加工作人员的位置。
我在网上阅读了很多关于babel
但我想摆脱这个选项的帖子。有没有其他选择来嘲笑import.meta.url
开玩笑?
任何帮助都将受到欢迎。这是当前的配置。
包.json
{
...
"@babel/core": "^7.8.6",
"next": "^10.1.3",
"react": "^16.13.0",
"webpack": "^5.37.1"
"devDependencies": {
...
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"jest": "^24.9.0",
"jest-cli": "^25.1.0",
...
}
...
}
next.config.js
const {
...
} = process.env;
const basePath = "";
const COMMIT_SHA = [];
const { parsed: localEnv } = require("dotenv").config();
const webpack = require("webpack");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
const nextConfig = {
env: {
NEXT_PUBLIC_COMMIT_SHA: COMMIT_SHA,
},
images: {
domains: [
"...",
],
},
future: {
webpack5: true,
},
productionBrowserSourceMaps: true,
trailingSlash: true,
reactStrictMode: true,
webpack: (config, options) => {
if (localEnv) {
config.plugins.push(new webpack.EnvironmentPlugin(localEnv));
} else {
config.plugins.push(new webpack.EnvironmentPlugin(process.env));
}
config.module.rules.push({
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: {
loader: "url-loader",
options: {
limit: 100000,
name: "[name].[ext]",
},
},
});
config.output = {
...config.output,
chunkFilename: options.isServer
? `${options.dev ? "[name]" : "[name].[fullhash]"}.js`
: `static/chunks/${options.dev ? "[name]" : "[name].[fullhash]"}.js`,
publicPath: `/_next/`,
globalObject: `(typeof self !== 'undefined' ? self : this)`,
};
config.plugins.push(new webpack.IgnorePlugin(/pages.*\/__tests__.*/));
config.plugins.push(
new options.webpack.DefinePlugin({
"process.env.NEXT_IS_SERVER": JSON.stringify(
options.isServer.toString()
),
})
);
return config;
},
};
module.exports = withBundleAnalyzer(nextConfig);
useEffect
工人_
useEffect(() => {
if (pageData.data?.length) {
workerRef.current = new Worker(new URL("@/workers/task.worker.js", import.meta.url));
workerRef.current.addEventListener("message", result => {
if (result.error) {
setWorkerError();
} else {
updateData(result.data);
}
});
const ids = pageData.data.map(store => store.id);
workerRef.current.postMessage(ids);
} else {
setNoDataFound();
}
return () => {
workerRef.current && workerRef.current.terminate();
};
}, []);
jest.config.js
module.exports = {
moduleDirectories: ["node_modules", "src", "static", "store"],
modulePathIgnorePatterns: [
"<rootDir>/node_modules/prismjs/plugins/line-numbers",
],
testPathIgnorePatterns: [
"<rootDir>/src/components/component-library",
"<rootDir>/.next",
"jest.config.js",
"next.config.js",
],
collectCoverageFrom: [
"**/src/**",
"**/store/**",
"**/pages/**",
"!**/__tests__/**",
"!**/node_modules/**",
"!**/component-library/**",
],
testEnvironment: "node",
collectCoverage: true,
verbose: false,
automock: false,
setupFiles: ["./setupTests.js"],
moduleNameMapper: {
"@/components/(.*)$": "<rootDir>/src/components/$1",
"@/functions/(.*)$": "<rootDir>/src/components/functions/$1",
"@/services/(.*)$": "<rootDir>/src/components/services/$1",
"@/workers/(.*)$": "<rootDir>/src/components/workers/$1",
"@/scripts(.*)$": "<rootDir>/src/scripts/$1",
"@/src(.*)$": "<rootDir>/src/$1",
"@/__mocks__(.*)$": "<rootDir>/__mocks__/$1",
"@/pages(.*)$": "<rootDir>/pages/$1",
"@/store(.*)$": "<rootDir>/store/$1",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
},
coveragePathIgnorePatterns: ["/node_modules/"],
coverageThreshold: {
global: {
branches: 67,
functions: 66,
lines: 73,
statements: 72,
},
},
runner: "groups",
extraGlobals: [],
testTimeout: 10000,
};
解决方案
在我的设置(typescript + ts-jest)中,我预先添加了以下节点选项以使其工作:
NODE_OPTIONS=--experimental-vm-modules
推荐阅读
- postgresql - psycopg2.errors.UndefinedColumn:列已排除。编号不存在
- video - 为用户跟踪和保存视频进度
- java - 当 Activity Swipe 上的 CardStackView 时如何停止适配器上的 MediaPlayer?
- c# - C# 控制台应用程序不会在其他人的计算机上运行
- html - How to Create Date Count timer selecting date from the date picker input and show the difference of selected date to current date
- laravel - Laravel - 如何将所有导入错误保存到表中
- python - 条形图中的颜色
- swagger - OpenAPI 3.0:C++ 服务器存根和客户端 SDK
- javascript - 如何从 Angular js 数组中过滤
- laravel - 即使 laravel 中不存在数据,关系仍然返回行