Reactjs Web Worker-Jest-无法使用'；import.meta'；模块外部_Reactjs_Webpack_Jestjs_Next.js_Babel Jest

Reactjs Web Worker-Jest-无法使用'；import.meta'；模块外部

reactjs webpack jestjs next.js

Reactjs Web Worker-Jest-无法使用'；import.meta'；模块外部,reactjs,webpack,jestjs,next.js,babel-jest,Reactjs,Webpack,Jestjs,Next.js,Babel Jest,我正在开发一个nextjs10.1.3内置web应用程序。我们实现了一个web worker来提高其中一个页面的性能，计划是继续增加更多的worker；此外，所有代码都经过了适当的单元测试，在以前的Web包版本（第4版和以下版本）中，我们使用工作加载程序，对其进行了测试在新的Webpack5版本中，不再需要工作者加载程序插件；相反，使用新版本加载web worker的方法是new worker（新URL（@/workers/task.worker.js），import.meta.URL））这

我正在开发一个

nextjs10.1.3

内置web应用程序。我们实现了一个web worker来提高其中一个页面的性能，计划是继续增加更多的worker；此外，所有代码都经过了适当的单元测试，在以前的Web包版本（第4版和以下版本）中，我们使用

工作加载程序

，对其进行了测试

在新的Webpack5版本中，不再需要

工作者加载程序

插件；相反，使用新版本加载web worker的方法是

new worker（新URL（@/workers/task.worker.js），import.meta.URL））
这样做，我的代码在npm build和&npm start
中按预期工作；但是，当我尝试添加相应的单元测试时，我遇到了以下错误：无法在模块外部使用“import.meta”
，并且由于用于在浏览器中添加工作人员位置的import.meta.url
而发生了一切
我在网上读了很多关于巴别塔的帖子，但我想放弃这个选择。有没有其他选项可以用jest模拟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);

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

使用效果的worker

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
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);

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

module.exports={
moduleDirectories:[“node_modules”、“src”、“static”、“store”]，
modulePathIgnorePatterns：[
“/node_modules/prismjs/plugins/line number”，
],
testPathIgnorePatterns：[
“/src/components/component library”，
“/.next”，
“jest.config.js”，
“next.config.js”，
],
收款人：[
“**/src/**”，
“**/store/**”，
“**/pages/**”，
“！***/\uuuuuu测试”，
“！**/node_modules/**”，
“！**/组件库/**”，
],
测试环境：“节点”，
报道：是的，
冗长：错，
automock:false，
setupFiles:[”/setupTests.js“]，
模块映射：{
“@/components/（.*）$”：“/src/components/$1”，
“@/functions/（.*）$”：“/src/components/functions/$1”，
“@/services/（.*）$”：“/src/components/services/$1”，
“@/workers/（.*）$”：“/src/components/workers/$1”，
“@/scripts（.*）$”：“/src/scripts/$1”，
“@/src（.*）$”：“/src/$1”，
“@/\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu（.*）”：“/\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu，
“@/pages（.*）$”：“/pages/$1”，
“@/store（.*）$”：“/store/$1”，
“\\（css | less）$”：“/\uu mocks\uuu/styleMock.js”，
},
coveragePathIgnorePatterns:[“/node_modules/”]，
覆盖率阈值：{
全球：{
分支机构：67，
职能：66，
行数：73，
声明：72，
},
},
跑步者：“团体”，
全球外：[]，
测试超时：10000，
};
你肯定会遇到这种情况。Jest还不完全支持ES模块，并且import.meta
是ESM标准。谢谢@MattCarlotta，我正在祈祷这项功能很快就会提供！那怎么嘲笑呢