Angular + 茉莉花 + 业力测试 'window.location.href'

Question

我在尝试弄清楚如何使用 Jasmine 和 Karma 来测试这段代码时遇到了很多障碍。本质上，我正在尝试为用户导航回主页时编写测试。目前，当我 运行 测试时，它会打开浏览器并卡住，直到我关闭浏览器。非常感谢任何帮助！

component.ts

  export class HeaderComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {}

  goToHome(): void {
    window.location.href = '/';
  }
}

component.spec.ts

  describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  
  it('should call goToHome and navigate home', () => {
    component.goToHome();
    expect(component).toBeTruthy();
  });
});

Answer 1

在 Angular 中，您不想使用 window.location 导航到页面。你应该使用 router.navigate(['/'])。这将首先解决您的 Karma 问题。

如果您的路由器是 nested/complex，请在您的问题中添加更多详细信息。

您的测试可以断言调用了 router.navigate，或者您可以使用 RouterTestingModule.