Jestjs &引用；标识符'；全球'；已在compileFunction中声明；升级到monaco editor 0.21.0后jest测试中出错

我将react项目升级为使用摩纳哥编辑器版本0.21.0，此后，针对导入摩纳哥编辑器的文件的jest测试开始失败，出现以下错误：

● Test suite failed to run

/Users/omerharoon/Documents/code/packages/webapp/node_modules/monaco-editor/esm/vs/editor/editor.api.js:20
const global = self; // Set defaults for standalone editor
      ^

SyntaxError: Identifier 'global' has already been declared
    at compileFunction (<anonymous>)

  2 | 
  3 | import React from 'react';
> 4 | import * as monaco from 'monaco-editor';
    | ^
  5 | import { Resizable } from 're-resizable';
  6 | import {
  7 |   getLanguageFromFilename,

  at Runtime._execModule (node_modules/jest-runtime/build/index.js:1179:56)
  at Object.<anonymous> (src/components/helpers/MonacoEditor/index.tsx:4:1)
  at Object.<anonymous> (src/components/helpers/MonacoEditor/monaco_colorization.spec.tsx:6:1)

为了克服延迟加载问题

Jest配置：

"jest": {
"modulePaths": [
  "<rootDir>/src"
],
"collectCoverageFrom": [
  "**/*.{js,jsx,ts,tsx}",
  "!**/*.d.ts",
  "!**/node_modules/**",
  "!**/public/**",
  "!**/next.config.js",
  "!**/server.js"
],
"setupFilesAfterEnv": [
  "<rootDir>/setupTests.js"
],
"testPathIgnorePatterns": [
  "<rootDir>/node_modules/",
  "<rootDir>/.next/",
  "<rootDir>/public/",
  "<rootDir>/config/",
  "<rootDir>/next.config.js",
  "<rootDir>/server.js",
  "<rootDir>/build/"
],
"transform": {
  "^.+\\.[jt]sx?$": "babel-jest",
  "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js"
},
"transformIgnorePatterns": [
  "/node_modules/(?!monaco-editor)/",
  "^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
  "^monaco-editor$": "monaco-editor/esm/vs/editor/editor.api",
  "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"coverageReporters": [
  "text",
  [
    "lcov",
    {
      "projectRoot": "../../"
    }
  ]
]},

“开玩笑”：{
“模块路径”：[
“/src”
],
“CollectionCoverage from”：[
“***.{js，jsx，ts，tsx}”，
“！***/.d.ts”，
“！**/node_modules/**”，
“！**/public/**”，
“！**/next.config.js”，
“！**/server.js”
],
“SetupFileAfterEnv”：[
“/setupTests.js”
],
“testPathIgnorePatterns”：[
“/node_modules/”，
“/.next/”，
“/public/”，
“/config/”，
“/next.config.js”，
“/server.js”，
“/build/”
],
“转变”：{
“^.+\.[jt]sx？$”：“巴别塔玩笑”，
“^.+\.css$”：“/config/jest/cstransform.js”
},
“transformIgnorePatterns”：[
“/node_modules/（？！monaco editor）/”，
“^.+\.模块\（css | sass | scss）$”
],
“moduleNameMapper”：{
“^MONACOA editor$”：“MONACOA editor/esm/vs/editor/editor.api”，
“^.+\.模块\（css | sass | scss）$”：“标识obj代理”
},
“搬运工”：[
“文本”，
[
“lcov”，
{
“项目根”：“../../”
}
]
]},

升级到

摩纳哥编辑器0.23.0

为我解决了这个问题。

这是特定于未显示的Jest设置的。Jest不应该加载

esm

条目，或者应该传输它。无论哪种方式，这都可以通过配置来解决。@EstusFlask将配置添加到文章中。

"jest": {
"modulePaths": [
  "<rootDir>/src"
],
"collectCoverageFrom": [
  "**/*.{js,jsx,ts,tsx}",
  "!**/*.d.ts",
  "!**/node_modules/**",
  "!**/public/**",
  "!**/next.config.js",
  "!**/server.js"
],
"setupFilesAfterEnv": [
  "<rootDir>/setupTests.js"
],
"testPathIgnorePatterns": [
  "<rootDir>/node_modules/",
  "<rootDir>/.next/",
  "<rootDir>/public/",
  "<rootDir>/config/",
  "<rootDir>/next.config.js",
  "<rootDir>/server.js",
  "<rootDir>/build/"
],
"transform": {
  "^.+\\.[jt]sx?$": "babel-jest",
  "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js"
},
"transformIgnorePatterns": [
  "/node_modules/(?!monaco-editor)/",
  "^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
  "^monaco-editor$": "monaco-editor/esm/vs/editor/editor.api",
  "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"coverageReporters": [
  "text",
  [
    "lcov",
    {
      "projectRoot": "../../"
    }
  ]
]},