Angular 15组件.spec.ts测试文件生成及运行问题咨询

一、解决手动创建的.spec.ts不执行问题 #

• 检查angular.json配置：打开项目根目录的angular.json，找到projects下对应项目的test配置块，确认include数组包含"src/**/*.spec.ts"，如果组件在自定义子目录，需确保路径被该通配符覆盖，或添加单独路径规则。
• 验证文件命名与路径：手动创建的测试文件必须和目标组件.ts文件同目录，且命名完全匹配（如user-profile.component.ts对应user-profile.component.spec.ts），注意大小写严格一致，Angular CLI对文件名大小写敏感。
• 清除缓存并重启测试：停止当前测试进程，执行ng test --no-watch --code-coverage重新运行，避免缓存导致新文件未被识别。

二、正确生成仅测试文件的命令 #

Angular 15已移除--spec-only参数，生成组件专属测试文件的正确命令如下：

• 基础命令：ng g spec component <component-name>，替换<component-name>为你的组件名称，CLI会自动在对应组件目录生成符合规范的测试模板。
• 指定路径：如果组件不在默认src/app目录，添加--path参数指定路径，例如：

  ng g spec component user-profile --path src/app/features/user
  

三、手动创建测试文件的规范模板 #

如果坚持手动创建，需确保测试文件符合Angular测试规范，以下是基础模板示例（替换组件名和路径）：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UserProfileComponent } from './user-profile.component';

describe('UserProfileComponent', () => {
  let component: UserProfileComponent;
  let fixture: ComponentFixture<UserProfileComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ UserProfileComponent ]
    })
    .compileComponents();

    fixture = TestBed.createComponent(UserProfileComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

确保组件导入路径正确，测试模块配置完整，这样测试用例才能被CLI识别并执行。

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