运行Angular测试报SyntaxError: Invalid or unexpected token at <Jasmine>如何解决

错误原因 #

你遇到的Invalid or unexpected token错误属于Angular JIT编译器的通用运行时报错，触发的核心原因是编译器在解析待执行代码时，遇到了不符合JS/TS语法规则的字符或内容，结合你给出的代码片段，常见触发场景和对应解决方法如下：

解决方案 #

• 移除重复的服务注册 #

  CoreModule已经在自身providers中声明了MortgageCalculatorService，TestBed配置中同时导入CoreModule、重复注册服务会导致依赖实例冲突，先修改测试代码，移除重复的providers配置：

  import { TestBed } from '@angular/core/testing';
  import { CoreModule } from '../core.module';
  import { MortgageCalculatorService } from './mortgage-calculator.service';
  
  describe('Mortgage calculator service', () => {
    let service: MortgageCalculatorService;
  
    beforeEach(() => {
      TestBed.configureTestingModule({
        imports: [CoreModule]
      });
      service = TestBed.inject(MortgageCalculatorService);
    });
  
    it('should be created', () => {
      const a = 'aa';
      expect(a).toEqual('aa');
    });
  });
  

  如果仅测试服务本身逻辑，不需要依赖CoreModule的其他能力，可直接移除imports: [CoreModule]配置，只在providers中注册MortgageCalculatorService及其依赖的MortgageAdapter即可，进一步缩小测试范围避免其他模块干扰。

• 检查静态资源导入 #

  打开MortgageCalculatorService、MortgageAdapter及两者依赖的所有文件，确认没有直接导入CSS、SVG、图片等非TS/JS格式的静态资源。如果存在这类导入，需要在测试环境增加资源mock规则：
  打开src/test.ts，添加对应资源类型的类型声明：

  declare module '*.svg' { const content: string; export default content; }
  declare module '*.css' { const content: Record<string, string>; export default content; }
  declare module '*.png' { const content: string; export default content; }
  

• 检查语法与配置 #

  1. 检查MortgageAdapter代码是否存在低级语法错误，比如未闭合的字符串、多余的标点符号、不匹配的括号等，这类问题会直接触发JIT编译token异常
  2. 确认tsconfig.spec.json的编译配置和项目主配置保持一致，include字段覆盖所有测试相关的TS文件，target版本不要设置过高导致语法兼容性问题。

• 清理缓存重启测试 #

  以上配置调整完成后，执行以下命令清理缓存重新运行测试：

  npm run ng test -- --no-cache
  

  也可手动删除node_modules/.cache文件夹后再启动测试。

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