Angular 19项目引入monaco-editor后组件测试报错的解决方法

方法1：扩展Webpack测试配置处理monaco的CSS文件 #

Angular测试构建默认未配置处理node_modules中monaco-editor的零散CSS文件，需通过自定义Webpack规则解决：

1. 安装自定义构建依赖：

npm install @angular-builders/custom-webpack --save-dev

2. 在项目根目录创建webpack.test.config.js，添加CSS处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        include: /node_modules\/monaco-editor/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

3. 修改angular.json的测试构建配置：
   找到projects -> [你的项目名称] -> architect -> test，替换构建器并引入自定义配置：

"test": {
  "builder": "@angular-builders/custom-webpack:karma",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.test.config.js"
    },
    // 保留原有其他配置（如styles、scripts等）
    "styles": [
      "src/styles.scss"
    ]
  }
}

方法2：Mock monaco-editor快速绕过测试错误 #

如果测试不需要验证monaco编辑器的实际功能，可直接mock模块避免CSS加载问题：

Jest环境 #

在组件的.spec.ts文件顶部添加：

jest.mock('monaco-editor', () => ({
  editor: {
    create: jest.fn(),
    // 根据组件中用到的monaco API补充mock内容
  }
}));

Jasmine环境 #

// 先确保window上有monaco对象
(window as any).monaco = {
  editor: {
    create: jasmine.createSpy('create')
  }
};

方法3：改用UMD版本的monaco-editor #

切换到monaco的打包好的UMD版本，避免分散导入大量CSS文件：

1. 组件中修改导入路径：

import * as monaco from 'monaco-editor/min/vs/editor/editor.main';

2. 在angular.json的styles数组中添加全局CSS：

"styles": [
  "src/styles.scss",
  "./node_modules/monaco-editor/min/vs/editor/editor.main.css"
]

内容的提问来源于stack exchange，提问作者Dvora