无法使用编辑器测试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和babeljest的软件包。

巴别塔配置：

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

我对Jest和摩纳哥也有同样的问题，为了通过测试，我必须：

1. 为摩纳哥编辑添加moduleNameMapper:#133（评论）
2. 配置setupTests.js，如下所述：stackOverflow

我正在使用：

• “笑话”：“^24.9.0”
• “巴别塔笑话”：“24.9”
• “摩纳哥编辑”：“^0.20.0”
• “编辑”：“0.33.0”，
• “摩纳哥编辑器网页包插件”：“^1.8.2”

Answer 2

在这个问题上帮助我的唯一解决方法（从这里开始）：

在文件夹__mocks__创建文件react-monaco-editor.js与内容：

import * as React from 'react';

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

Answer 3

从monaco延迟加载模块的文档中建议的导入语句会导致esm文件夹，jest对此并不熟悉。

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

默认情况下，babeljest不会转换node\u模块，因此任何引用monaco编辑器的内容都会出错。一种可能的解决方案是，如文档中所述，通过transformIgnorePatterns将monaco编辑器包包含到编译步骤中

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

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

注：如果您使用的是jest-dom，它可能会开始抱怨没有从monaco-editor中实现某些功能，您可以通过以下方式模拟它：

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