Angular testing component with ActivatedRoute

Question

I have a big problem with testing component that uses ActivatedRoute - I only want to pass the default test "component.toBeTruthy"

Component class:

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

  roomId:string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.roomId = this.route.snapshot.params.id;
  }

}

Test:

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

  beforeEach(async(() => {

    let temp = new ActivatedRouteStub();

    TestBed.configureTestingModule({
      declarations: [ RoomComponent ],
      imports: [MaterialModule, FormsModule, RouterModule, BrowserModule,BrowserAnimationsModule],
      providers: [MatDialog, MatToolbar, RoomService,
        {
          provide: ActivatedRoute, useValue: {}
        }
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  }));

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

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

The problem is, that when I start tests it's fails with strange error:

Chrome 65.0.3325 (Mac OS X 10.13.4) ERROR { "message": "Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/RoomComponent_Host.ngfactory.js'.\nat http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2206:25\n\nError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/RoomComponent_Host.ngfactory.js'.\n at http://localhost:9876/_karma_webpack_/polyfills.bundle.js:4970:35\n at XMLHttpRequest.proto.(anonymous function) [as send] (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:3386:24)\n at Array. (node_modules/source-map-support/browser-source-map-support.js:107:134)\n at node_modules/source-map-support/browser-source-map-support.js:101:106\n

If I remove this line this.roomId = this.route.snapshot.params.id; from ngOnInit, everything working.

What's happening?

Two things: try turning sourcemaps off when running the tests to maybe get more feedback on the failure; and consider using the RouterTestingModule for a more controlled test environment. — jonrsharpe
Possible duplicate of Angular tests failing with Failed to execute 'send' on 'XMLHttpRequest' — jonrsharpe
I've just seen your first answer with the router testing module @jonrsharpe, I was completely oblivious to that. You should make an answer with that ! I'm removing my other comments & answers as they are useless or just parroting. — user4676340
sourcemaps off helped! - I have to provide {snapshot:{params:{id:''}}} — Maciej Wojcik

stack247 stack247 · Accepted Answer · 2018-08-21T03:50:22

My gut says the error message is probably has nothing to do with the actual problem.

The issue is that you are using {} as provider for ActivatedRoute. Then, in your component, you are trying to access ActivatedRoute, which in the test case, is {}.

Can you try replacing your providers to:

providers: [MatDialog, MatToolbar, RoomService,
{
  provide: ActivatedRoute, useValue: {
    snapshot: { params: { id: 123 } }
  }
}];

Angular testing component with ActivatedRoute

1 Answers