Web Worker - Jest - 不能在模块外使用“import.meta”

编程问答 2022-05-09

问题描述

我正在开发一个 nextjs 10.1.3 内置网络应用程序。我们实施了一个 web worker 来提高其中一个页面的性能，并计划继续添加更多的 worker；此外，所有代码都经过适当的单元测试，并且使用之前的 webpack 版本（第 4 版及以下）中的 worker-loader 我们能够对其进行测试。

在新的 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？

非常欢迎任何帮助。这是当前配置。

package.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,};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

babel-jestjestjsreactjsreactjsreactjsreactjswebpackwebpackwebpack