无法使用Monaco Editor测试Jest - 意外的令牌

Question

使用jest运行应用程序失败，显示以下错误：

Details:

/home/**/node_modules/monaco-editor/esm/vs/editor/editor.api.js:5
import { EDITOR_DEFAULTS } from './common/config/editorOptions.js';
       ^

SyntaxError: Unexpected token {

> 1 | import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
    | ^
  2 | 
  3 | /**
  4 |  * Get create function for the editor.

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (src/utils/editor-actions.js:1:1)

应用程序已安装了 jest 和 babel-jest 的软件包。

Babel 配置：

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1"
      },
      useBuiltIns: "usage",
      corejs: 3,
    }
  ],
  "@babel/preset-react"
];

const plugins = [
  "@babel/plugin-proposal-object-rest-spread",
  "@babel/plugin-proposal-class-properties",
  "babel-plugin-styled-components"
];

module.exports = { presets, plugins };

- Agney

Answer 1

根据文档建议，用于惰性加载monaco模块的import语句指向esm文件夹，但jest不熟悉该文件夹。

import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";

默认情况下，babel-jest 不会转换 node_modules，因此任何引用 monaco-editor 的内容都会报错。一种可能的解决方案是通过在 transformIgnorePatterns 中包含 monaco-editor 包来将其包含到编译步骤中，如 文档 所述。

将以下内容添加到 jest 配置中：

{
  "transformIgnorePatterns": [
     "node_modules\/(?!(monaco-editor)\/)"
  ]
}

PS: 如果你正在使用 jest-dom，它可能会抱怨没有实现来自 monaco-editor 的某些功能，您可以使用以下方式进行模拟：

jest.mock("monaco-editor/esm/vs/editor/editor.api.js");

- Agney

Answer 2

这是我在处理类似问题时找到的唯一解决方法（来自这里）：

在文件夹__mocks__中创建文件react-monaco-editor.js，并添加以下内容：

import * as React from 'react';

export default function MonacoEditor() {
  return <div />;
}

- misolo

---

我尝试了多种解决方案，包括transformIgnorePatterns和moduleNameMapper，但唯一有效的方法是模拟Monaco。 - Giao Tran

Answer 3

我在使用Jest和Monaco时遇到相同的问题，为了使测试通过，我必须执行以下操作：

1. 为monaco-editor添加moduleNameMapper：#133 (comment)
2. 像这里解释的那样配置setupTests.js：stackOverflow

我正在使用：

• "jest": "^24.9.0"
• "babel-jest": "24.9",
• "monaco-editor": "^0.20.0"
• "react-monaco-editor": "0.33.0",
• "monaco-editor-webpack-plugin": "^1.8.2"

- lucataglia