Angular 2 测试 - RouterLinkWithHref 的问题答案

【问题标题】：Angular 2 Testing - Issue with RouterLinkWithHrefAngular 2 测试 - RouterLinkWithHref 的问题
【发布时间】：2017-09-02 08:12:05
【问题描述】：

我正在处理路由组件的测试，我总是得到，我想可能需要导入更多模块或提供一些东西，但我无法使其正常工作？下面是错误和代码...

TypeError: Cannot read property 'subscribe' of undefined
at new RouterLinkWithHref (/node_modules/@angular/router/@angular/router.es5.js:5028:1)
at createClass (/node_modules/@angular/core/@angular/core.es5.js:10926:1)
at createDirectiveInstance (/node_modules/@angular/core/@angular/core.es5.js:10751:22)
at createViewNodes (/node_modules/@angular/core/@angular/core.es5.js:12187:34)
at callViewAction (/node_modules/@angular/core/@angular/core.es5.js:12633:1)
at execComponentViewsAction (/node_modules/@angular/core/@angular/core.es5.js:12542:1)
at createViewNodes (/node_modules/@angular/core/@angular/core.es5.js:12214:1)
at callViewAction (/node_modules/@angular/core/@angular/core.es5.js:12633:1)
at execComponentViewsAction (/node_modules/@angular/core/@angular/core.es5.js:12542:1)
at createViewNodes (/node_modules/@angular/core/@angular/core.es5.js:12214:1)

这是测试模块的代码

describe('ItemsComponent', () => {
    let component: ItemsComponent;
    let fixture: ComponentFixture<ItemsComponent>;
    let store: Store<any>;
    const mockRouter = {
        navigate: jasmine.createSpy('#/items')
    }

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                FormsModule,
                ReactiveFormsModule,
                ItemsRoutingModule,
                MenuModule,
                MenuBottomModule,
                AutoCompleteModule,
                HttpModule,
                StoreModule.provideStore(reducer),
                RouterStoreModule.connectRouter(),
                StoreDevtoolsModule.instrumentOnlyWithExtension(),
            ],
            declarations: [
                ItemsComponent,
                ItemComponent,
                ItemEditComponent,
            ],
            providers: [
                HistoryService,
                CookieService,
                ItemsService,
                Http,
                ConnectionBackend,
                RouterModule,
                { provide: Router, useValue: mockRouter },
                { provide: Store, useValue: store },
                LoadingService,
                { provide: ActivatedRoute, useValue: mockRouter },
                MessageService,
                LoginService,
                ShopsService,
                LocationStrategy,
            ]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(ItemsComponent);
        component = fixture.componentInstance;
        store = fixture.debugElement.injector.get(Store)
        fixture.detectChanges();
    });

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

谢谢

【问题讨论】：

RouterModule 不是提供者。导入RouterTestingModule 或模拟路由器、激活路由等作为提供者。一般来说，您似乎需要设置很多东西来测试单个组件，也许它做的事情太多了。
我已经尝试过使用 RouterTestingModule 但仍然是同样的问题，我在上面的代码中模拟了路由器，但这是正确的做法吗？
我在一个组件中遇到了同样的事情，我在其中模拟 router，就像您在这里所做的那样，并且我在标记中有一个带有 routerLink 属性的 <a> 标记。查看RouterTestingModule。这也可能有帮助：stackoverflow.com/a/40187305/4530745

标签： angular testing jasmine

【解决方案1】：

我今天也遇到了同样的问题。您正在某处导入 RoutingModule。也许在您自己的模块上有一个导入，您将其包含在内。

删除对 RoutingModule 的任何导入并仅包含 RouterTestingModule。

在我的代码中，我收到了这个错误，因为我同时包含了两者。

希望对你有帮助

【讨论】：