Angular Jasmine测试中endponitConfig未定义的ReferenceError错误求助

作为Angular单元测试新手遇到这个问题很正常，我帮你一步步分析解决：

首先，修复组件里的语法错误 #

我注意到你的DriversListComponent代码里有一个基础语法错误：类内部不能用let来声明成员变量，这会导致编译异常，可能间接引发测试错误。你需要把：

export class DriversListComponent {
 //calling const form endpoint file
 let driverEndpoint=endponitConfig.DRIVER_API_ENDPOINT;
 //logic
}

改成：

export class DriversListComponent {
 // 直接定义类属性，去掉let
 driverEndpoint = endponitConfig.DRIVER_API_ENDPOINT;
 //logic
}

分析错误根源 #

从错误堆栈来看，实际报错的位置是WidgetsGridComponent的ngAfterViewInit方法，它在初始化jarvisWidgets插件时找不到endponitConfig。因为你在测试中导入了SmartadminModule，这个模块包含的WidgetsGridComponent依赖了这个配置常量，但测试环境下要么路径加载有问题，要么没有正确提供这个常量。

解决方案 #

方案1：修正配置文件的导入路径 #

检查你组件和spec文件中endpoints.ts的导入路径，相对路径../../../../environments/endpoints可能在测试环境下无法正确定位文件。你可以改用基于src目录的绝对路径，比如：

import { endponitConfig } from 'src/environments/endpoints';

这样能避免相对路径带来的定位问题。

方案2：通过依赖注入提供模拟配置（推荐） #

为了让测试更独立，不依赖真实环境配置，你可以把endponitConfig改成可注入的形式：

1. 修改component.ts：

import { Component, Inject, InjectionToken } from '@angular/core';
// ...其他导入

// 定义注入令牌
export const ENDPOINT_CONFIG = new InjectionToken('endponitConfig');

@Component({
  templateUrl: './drivers.list.component.html',
  providers: [{ provide: ENDPOINT_CONFIG, useValue: endponitConfig }]
})
export class DriversListComponent {
  driverEndpoint: string;

  constructor(@Inject(ENDPOINT_CONFIG) private endpointConfig: any) {
    this.driverEndpoint = endpointConfig.DRIVER_API_ENDPOINT;
  }
  // 其他逻辑
}

2. 在component.spec.ts中提供模拟配置：

// ...其他导入
import { ENDPOINT_CONFIG } from './drivers.list.component';

describe('Driver list component', () => {
  let driverListComponent: DriversListComponent;
  let fixture: ComponentFixture<DriversListComponent>;
  let router: Router;
  let driverService, mockBackend;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [DriversListComponent],
      imports: [
        SmartadminModule, 
        SmartadminDatatableModule, 
        MyDatePickerModule, 
        CommonModule, 
        SelectModule, 
        ReactiveFormsModule, 
        FormsModule, 
        RouterTestingModule.withRoutes([{ path: '', component: DriversListComponent }])
      ],
      schemas: [NO_ERRORS_SCHEMA],
      providers: [
        DriverService,
        MockBackend,
        { provide: XHRBackend, useClass: MockBackend },
        // 提供模拟的端点配置
        { provide: ENDPOINT_CONFIG, useValue: { DRIVER_API_ENDPOINT: '/mock/drivers/' } }
      ]
    })
    .compileComponents();

    router = TestBed.get(Router);
    fixture = TestBed.createComponent(DriversListComponent);
    driverListComponent = fixture.componentInstance;
    driverService = TestBed.get(DriverService);
    mockBackend = TestBed.get(MockBackend);
    fixture.detectChanges();
  }));

  // ...测试用例
});

方案3：Mock有问题的Smartadmin组件 #

如果错误是因为WidgetsGridComponent初始化第三方插件导致的，你可以直接mock这个组件，避免执行真实的生命周期方法：

在component.spec.ts中添加一个mock组件：

import { Component } from '@angular/core';

// 匹配Smartadmin中WidgetsGridComponent的选择器
@Component({
  selector: 'sa-widgets-grid',
  template: '<div></div>'
})
class MockWidgetsGridComponent {}

然后在TestBed的declarations里替换真实组件：

TestBed.configureTestingModule({
  declarations: [DriversListComponent, MockWidgetsGridComponent],
  // ...其他配置
})

这样测试时就会使用空的mock组件，不会触发真实组件里的插件初始化逻辑。

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