Angular 2 - 单元测试错误:TypeError:无法读取未定义

时间:2017-05-24 16:26:02

标签: unit-testing jasmine karma-runner angular2-routing karma-jasmine

因此,我收到模块中所有测试用例的错误TypeError: Cannot read property 'subscribe' of undefined。在我的组件中,我正在注入“ActivatedRoute”和“Router”,在我的ngOnInit()中,我得到了一些我在路由模块中传递的数据。 这些是我的文件:

自定义-routing.module.ts

const casesRoutes: Routes = [
    {
        path: '',
        component: MainComponent,
        children: [
            {
                path: '',
                component: CustomComponent,
                resolve: {
                    someData: CustomResolver
                },
                children: [
                    {
                        path: 'child',
                        component: ChildComponent
                    }
                ]
            },
            {
                path: ':id/edit',
                component: CaseEditComponent,
                resolve: {
                    theCase: CaseDetailResolver
                }
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(casesRoutes)
    ],
    exports: [
        RouterModule
    ],
    providers: [
        CustomResolver
    ]
})
export class CustomRoutingModule { }

custom.component.ts

@Component({
    selector: 'my-custom',
    styleUrls: ['./custom.component.css'],
    templateUrl: './custom.component.html',
})
export class CustomComponent implements OnInit {

    public someData: TheData;

    constructor(private route: ActivatedRoute, private router: Router) { }

    public ngOnInit(): void {
        this.route.data.subscribe((data) => {
            this.someData = data.someData;
        });
    }

    public navigateTo(): void {
        this.router.navigate(['child'], { relativeTo: this.route });
    }
}

custom.component.spec.ts

describe('CustomComponent', () => {
    let comp: CustomComponent;
    let fixture: ComponentFixture<CustomComponent>;
    let router = {
        navigate: jasmine.createSpy('navigate')
    }

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                RouterTestingModule
            ],
            declarations: [
                CustomComponent
            ],
            providers: [
                {
                    provide: ActivatedRoute,
                    useValue: {
                        data: Observable.of({
                            someData: { id: 1, lastName: 'Last', firstName: 'First' }
                        })
                    }
                },
                {
                    provide: Router,
                    useValue: router
                }
            ]
        }).compileComponents();
    }));

    beforeEach(async(() => {
        fixture = TestBed.createComponent(CustomComponent);
        comp = fixture.componentInstance;

        fixture.detectChanges();
    }));

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

    it('should initialize the component correctly and expect some data returned from ActivatedRoute', () => {
        comp.ngOnInit();
        expect(comp.someData).toBeDefined();
    });

    it('should verify the navigate method from router is called', () => {
        comp.navigateTo();
        expect(router.navigate).toHaveBeenCalled();
    });
});

起初我认为它可能因为ngOnInit()中的语句而破坏,因为它是我使用subscribe方法的唯一情况,但即使是我检查组件的第一个测试,失败了。我甚至添加了一些console.info()次调用,以检查组件中的this.route.data是否有一些数据,实际上是这样,我不知道是什么导致它。

0 个答案:

没有答案