jestjs - 无法用 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 };

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 包包含到编译步骤中。如 docs 中所述

将这些添加到 jest 配置中:

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

PS:如果您使用的是 jest-dom , 它可能会开始提示没有实现 monaco-editor 的某些功能，你可以模拟它:

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