Angular项目中Karma+Jasmine执行ng test无测试运行问题排查

问题现象 #

• 执行ng test或npm run test后，Karma仅显示socket连接成功，无任何测试执行反馈
• 编写断言不存在文本的失败测试，既无成功提示也无失败报错
• 修改测试中断言方法为错误名称（如toBeInTheDocumentBogus）时，文件会被监听并抛出语法错误，但修正后仍无测试执行结果

排查与解决步骤 #

1. 修正测试文件加载逻辑 #

你的Jasmine配置中手动使用require.context加载测试文件，这可能和Angular 14默认的test.ts加载逻辑冲突：

• 检查项目根目录下的test.ts，确保其使用Angular官方的测试初始化逻辑，示例如下：

  import 'zone.js/testing';
  import { getTestBed } from '@angular/core/testing';
  import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting
  } from '@angular/platform-browser-dynamic/testing';
  
  declare const require: {
    context(path: string, deep?: boolean, filter?: RegExp): {
      keys(): string[];
      <T>(id: string): T;
    };
  };
  
  // 初始化Angular测试环境
  getTestBed().initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting(),
  );
  
  // 加载所有.spec.ts测试文件
  const context = require.context('./', true, /\.spec\.ts$/);
  context.keys().map(context);
  

• 移除自定义Jasmine配置中手动调用__karma__.start()的代码，Angular会自动处理Karma的启动逻辑

2. 调整Karma配置的files项 #

当前Karma配置中files设置了included: false，会阻止Karma自动加载测试文件，而@angular-devkit/build-angular插件会自动处理测试文件加载，建议：

• 直接删除Karma配置中的files数组，使用插件默认的文件加载逻辑
• 如果需要保留files配置，将included改为true，确保路径正确：

  files: [
    { pattern: './src/**/*.spec.ts', included: true, watched: true }
  ],
  

3. 确认测试依赖完整性 #

你使用了@testing-library/angular的render和screen API，需确保依赖配置正确：

• 安装必要依赖：

  npm install @testing-library/angular @testing-library/jasmine-dom --save-dev
  

• 在test.ts中导入@testing-library/jasmine-dom以扩展Jasmine断言：

  import '@testing-library/jasmine-dom';
  

• 检查render调用是否完整，若组件依赖其他服务/组件，需在配置中声明：

  await render(DialogComponent, {
    declarations: [/* 依赖组件 */],
    providers: [/* 依赖服务 */]
  });
  

4. 开启Karma客户端详细日志 #

修改Karma配置的client项，开启日志排查初始化问题：

client: {
  jasmine: {
    random: false,
    verbose: true
  },
  clearContext: false,
  captureConsole: true
},

• verbose: true会输出Jasmine的详细执行日志
• captureConsole: true会捕获控制台输出，便于定位隐藏错误

5. 校验Angular构建配置 #

打开angular.json，确认测试配置正确：

"projects": {
  "your-project-name": {
    "architect": {
      "test": {
        "builder": "@angular-devkit/build-angular:karma",
        "options": {
          "main": "src/test.ts",
          "polyfills": "src/polyfills.ts",
          "tsConfig": "tsconfig.spec.json",
          "karmaConfig": "karma.conf.js"
        }
      }
    }
  }
}

• 确保builder为@angular-devkit/build-angular:karma
• 确认main指向正确的test.ts文件

6. 清理缓存并重建 #

• 清理Angular缓存：

  npx ng cache clean
  

• 删除node_modules和package-lock.json，重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 重启Karma服务，避免旧缓存干扰

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