Angular Jasmine+Karma测试路由配置错误：组件初始化测试失败

问题背景 #

在独立路由模块中为BooksListContainerComponent配置了两种访问路由：

• 不带参数的/list
• 带customerId参数的/list/:customerId

使用Jasmine编写单元测试时，出现路由配置无效的错误，需要让测试断言expect(component).toBeTruthy();通过。

原代码与错误信息 #

1. 路由配置代码 #

{
    path: '',
    redirectTo: 'list', pathMatch: 'full'
  },
  {
    path: 'list',
    component: BooksListContainerComponent,
    canActivate: [AuthenticationGuard],
    children: [
      { path: ':customerId' }
    ],
    data: {
      accessKey,
      cardContainer: false,
      noPadding: false,
    }
  }

2. 单元测试代码 #

describe('(1) BooksListContainerComponent unit test', () => {

    let fixture: ComponentFixture<BooksListContainerComponent>;
    let component: BooksListContainerComponent;
    let router: Router;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            imports: [
                BooksListContainerModule,
                ReactiveFormsModule,
                RouterTestingModule.withRoutes([{
                    path: 'list',
                    children: [{
                        path: ':customerId',
                        data: null,
                        component: BooksListContainerComponent
                    }]
                }]),
            ],
            providers: [
                {
                    provide: ActivatedRoute, useValue: {
                        params: of({ customerId: 'test' })
                    }
                }
            ],
            declarations: [
                BooksListContainerComponent,
                AppComponent
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]
        }).compileComponents();
        fixture = TestBed.createComponent(BooksListContainerComponent);
        router = TestBed.inject(Router);
        component = fixture.componentInstance;
        fixture.autoDetectChanges();
        fixture.detectChanges();
    });

    it('Should create BooksListContainerComponent', () => {
        let fixture = TestBed.createComponent(BooksListContainerComponent);
        let component = fixture.debugElement.children[0].componentInstance;
        component.customerECustCode = null;
        fixture.detectChanges();
        expect(component).toBeTruthy();
    })
});

3. 错误日志 #

Chrome 126.0.0 (Windows 10.0.0) (1) BooksListContainerComponent unit test Should create BooksListContainerComponent FAILED
        Error: Invalid configuration of route 'list/:customerId'. One of the following must be provided: component, redirectTo, children or loadChildren
            at validateNode (http://localhost:9876/_karma_webpack_/node_modules/@angular/router/__ivy_ngcc__/fesm2015/router.js:1292:1)
            at validateConfig (http://localhost:9876/_karma_webpack_/node_modules/@angular/router/__ivy_ngcc__/fesm2015/router.js:1247:1)
            at validateNode (http://localhost:9876/_karma_webpack_/node_modules/@angular/router/__ivy_ngcc__/fesm2015/router.js:1309:1)
            at validateConfig (http://localhost:9876/_karma_webpack_/node_modules/@angular/router/__ivy_ngcc__/fesm2015/router.js:1247:1)
            at Router.resetConfig (http://localhost:9876/_karma_webpack_/node_modules/@angular/router/__ivy_ngcc__/fesm2015/router.js:7462:1)
            at new Router (http://localhost:9876/_karma_webpack_/node_modules/@angular/router/__ivy_ngcc__/fesm2015/router.js:6921:1)
            at Object.setupTestingRouter [as useFactory] (http://localhost:9876/_karma_webpack_/node_modules/@angular/router/__ivy_ngcc__/fesm2015/testing.js:139:1)
            at Object.factory (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:17223:1)
            at R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:17053:42)
            at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:16803:1)

4. 依赖版本 #

"devDependencies": {
    "@angular-devkit/build-angular": "~0.901.0",
    "@angular/cli": "~9.1.0",
    "@angular/compiler-cli": "~9.1.0",
    "@angular/language-service": "~9.1.0",
    "@chiragrupani/karma-chromium-edge-launcher": "^2.2.1",
    "@types/crypto-js": "^3.1.47",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "javascript-obfuscator": "^4.0.2",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  },

错误原因分析 #

1. 路由配置冲突与不规范：测试中同时导入了BooksListContainerModule（包含原有路由配置）和RouterTestingModule.withRoutes，导致路由规则冲突。此外，测试里的父路由list未指定组件，子路由的配置不符合Angular路由校验要求——每个路由节点必须提供component/redirectTo/children/loadChildren中的至少一项。
2. 单元测试冗余配置：单元测试的核心是验证组件能否正常创建，不需要完整复刻真实路由结构，过度配置路由反而引发错误。

解决方案 #

方案一：简化测试配置，移除冗余路由模块与配置 #

直接mock必要的路由依赖，不需要配置完整路由，避免路由校验错误：

修改后的测试代码：

describe('(1) BooksListContainerComponent unit test', () => {
    let fixture: ComponentFixture<BooksListContainerComponent>;
    let component: BooksListContainerComponent;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            imports: [
                ReactiveFormsModule
            ],
            providers: [
                // Mock路由守卫，避免依赖问题
                { provide: AuthenticationGuard, useValue: { canActivate: () => true } },
                // Mock ActivatedRoute，提供所需参数
                {
                    provide: ActivatedRoute, useValue: {
                        params: of({ customerId: 'test' }),
                        data: of({})
                    }
                },
                // Mock Router，避免路由初始化错误
                { provide: Router, useValue: { navigate: jasmine.createSpy('navigate') } }
            ],
            declarations: [
                BooksListContainerComponent
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]
        }).compileComponents();

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

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

方案二：修正路由配置，匹配原结构并符合校验要求 #

如果需要保留路由配置测试，确保测试中的路由结构与生产环境一致，且每个路由节点都符合规范：

修改后的RouterTestingModule配置：

RouterTestingModule.withRoutes([
    { path: '', redirectTo: 'list', pathMatch: 'full' },
    {
        path: 'list',
        component: BooksListContainerComponent,
        children: [
            { path: ':customerId', component: BooksListContainerComponent }
        ]
    }
])

同时移除BooksListContainerModule的导入，避免路由冲突。

关键注意点 #

• 单元测试优先mock依赖，而非导入完整模块，减少环境干扰。
• Angular路由配置中，任何路由节点都必须提供component/redirectTo/children/loadChildren中的至少一项，测试环境的校验比生产环境更严格。
• 如果组件依赖路由守卫（如AuthenticationGuard），必须在测试中mock该守卫，避免初始化失败。

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