预期已调用 Angular Route.navigate，但从未调用过

Question

我在监视注射时有

Router

。我正在从单元测试中调用组件的方法。该方法依次调用 Router.navigate。当期望 Router.navigate 间谍被调用时，我遇到了失败。

组件

@Component({
    selector: 'app-comp',
    standalone: true,
    imports: [],
    templateUrl: './comp.component.html',
    styleUrl: './comp.component.scss'
})
export class CompComponent implements OnInit {

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

    changeCompNumber(newCompNumber: number) {
        this.router.navigate([], { queryParams: { 'comp': newCompNumber }, queryParamsHandling: 'merge'}
    }

}

单元测试

describe('CompComponent', () => {
    let component: CompComponent;
    let fixture: ComponentFixture<CompComponent>;
    let ngZone: NgZone;
    let router: Router;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            imports: [RouterTestingModule, CompComponent]
        }).compileComponents();

        fixture = TestBed.createComponent(CompComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        ngZone = TestBed.inject(NgZone);
        router = TestBed.inject(Router);
    });

   it("should change comp number", fakeAsync(() => {

        ngZone.run(() => {
            component.changeCompNumber(20);
            tick()
            fixture.detectChanges();
        });
        const navSpy = spyOn(router, "navigate");
        expect(navSpy).toHaveBeenCalled();
    }))
});

错误：

Expected spy navigate to have been called.

Answer 1

你很可能监视得太晚了。尝试以下操作：

it("should change comp number", fakeAsync(() => {
        // Spy here
        const navSpy = spyOn(router, "navigate");
        ngZone.run(() => {
            component.changeCompNumber(20);
            tick()
            fixture.detectChanges();
        });
        expect(navSpy).toHaveBeenCalled();
    }))

此外，您很可能不需要

ngZone.run(())

。

it("should change comp number", fakeAsync(() => {
        // Spy here
        const navSpy = spyOn(router, "navigate");

        component.changeCompNumber(20);
        tick()
        fixture.detectChanges();

        expect(navSpy).toHaveBeenCalled();
    }))