使用Karma与PhantomJS 2.1.1测试报错：'class'为保留字

这个报错的核心原因很明确：PhantomJS 2.1.1的JavaScript引擎对ES6+语法支持不足，它基于老旧的QtWebKit 5.6，无法识别class这类ES6关键字，而你的Angular项目肯定是用ES6+语法编写的，直接运行自然会触发语法错误。下面给你两个靠谱的解决方案：

方案一：替换PhantomJS为ChromeHeadless（推荐） #

PhantomJS已经停止维护，ChromeHeadless是当前更主流的无头浏览器选择，对现代JS特性支持完美，后续也不会再出现类似的兼容问题。

1. 先安装ChromeHeadless的Karma启动器：

   npm install karma-chrome-launcher --save-dev
   

2. 修改你的karma.conf.js配置：
   • 在plugins数组里替换或添加Chrome启动器：

     plugins: [
       require('karma-jasmine'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
       // 移除原有的karma-phantomjs-launcher，添加这行
       require('karma-chrome-launcher'),
       require('@angular/cli/plugins/karma')
     ],
     

   • 将browsers配置改为ChromeHeadless：

     browsers: ['ChromeHeadless'],
     

   • 可额外添加ChromeHeadless的优化参数（可选，适配不同环境）：

     customLaunchers: {
       ChromeHeadless: {
         base: 'Chrome',
         flags: [
           '--headless',
           '--disable-gpu',
           '--no-sandbox', // Linux环境建议保留，非Linux可移除
           '--remote-debugging-port=9222'
         ]
       }
     },
     

方案二：用Babel转译ES6代码到ES5（兼容旧环境） #

如果你因特殊需求必须保留PhantomJS，可以通过Babel把ES6+代码转成PhantomJS能识别的ES5语法。

1. 安装必要的Babel依赖：

   npm install @babel/core @babel/preset-env karma-babel-preprocessor --save-dev
   

2. 在项目根目录创建.babelrc配置文件：

   {
     "presets": ["@babel/preset-env"]
   }
   

3. 修改karma.conf.js：
   • 在plugins里添加Babel预处理器：

     plugins: [
       // 其他已有的插件...
       require('karma-babel-preprocessor')
     ],
     

   • 添加预处理器配置，指定需要转译的文件路径（根据项目实际结构调整）：

     preprocessors: {
       './src/**/*.js': ['babel'],
       './src/**/*.spec.ts': ['babel']
     },
     

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