unit testing - Angular tests failing with Failed to execute 'send' on 'XMLHttpRequest'

Question

I am trying to test my angular 4.1.0 component -

export class CellComponent implements OnInit {
  lines: Observable<Array<ILine>>;
  @Input() dep: string;
  @Input() embedded: boolean;
  @Input() dashboard: boolean;
  constructor(
    public dataService: CellService,
    private route: ActivatedRoute,
    private router: Router, private store: Store<AppStore>) {
  }
}

However, a simple "should create" test throws this cryptic error...

NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'.

so I found this question, which suggests that the issue is the component has @Input)_ params which aren't set, however, if I modify my test like so:

  it('should create', inject([CellComponent], (cmp: CellComponent) => {
    cmp.dep = '';
    cmp.embedded = false;
    cmp.dashboard = false;
    expect(cmp).toBeTruthy();
  }));

then I still get the same issue, similarly, if I remove the @Input() annotations from the component, still no difference. How can I get these tests to pass?

Answer 1

This is a problem of the new Angular Cli. Run your test with --sourcemaps=false and you will get the right error messages.

See details here: https://github.com/angular/angular-cli/issues/7296

EDIT:

Shorthand for this is:

ng test -sm=false

As of angular 6 the command is:

ng test --source-map=false