StackBlitz: add jasmine-tests to an application with routing

Question

I'm trying to set up a StackBlitz with jasmine tests. I managed to add a simple test, the problem is that by doing that, I broke my routing. As soon as I click on one of the buttons, I get an error:

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login'

I believe that this has something to do with the main.ts file. Probably I should initialize my AppModule (or AppRoutingModule?) somewhere, since that's where the routes are defined. But I can't figure out how.

As you can see in main.ts I commented out the old code. But everytime I try to add pieces of it, I get this error:

Error in /turbo_modules/@angular/core@11.2.0/__ivy_ngcc__/bundles/core.umd.js (29742:19)
A platform with a different configuration has been created. Please destroy it first.

---

EDIT: I've fixed the first error as explained by Alif50 BUT the routing is still not working. Here is my updated StackBlitz.

---

EDIT2: as a reference, this is my original application before I added the tests. As you can see, I can navigate between two pages. Is there no way to keep this functionality once Karma is running? I seem to be able to set up only one component at a time, the one that has tests running for it (i.e. if I write a test for LoginComponent, then I will see that component INSTEAD of the HeaderComponent... I'd like my original app to run just like it did, and on top of that to have my tests running)

Answer 1

You need to actually register the routes if you are going to click on them in RouterTestingModule.

import { Component } from "@angular/core";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { RouterTestingModule } from "@angular/router/testing";

import { HeaderComponent } from "./header.component";

@Component({})
class DummyComponent {} // Create a dummy component for router config

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [HeaderComponent],
      imports: [
        RouterTestingModule.withRoutes([
          { path: "login", component: DummyComponent }, 
          { path: "activities", component: DummyComponent } // register the routes
        ])
      ]
    }).compileComponents();
  });

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

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

  it("should work", () => { // this test should work now after doing the above
    const login = fixture.debugElement.query(By.css("button")).nativeElement;
    login.click();
    // ... your other expects
  });
});