Angular测试失败,无法在'XMLHttpRequest'上执行'send'

Question

我正在尝试测试我的角度4.1.0组件 -

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>) {
  }
}

但是,一个简单的"应该创建"测试会引发这个神秘的错误......

NetworkError:无法在'XMLHttpRequest'上执行'send':无法加载'ng:///DynamicTestModule/module.ngfactory.js'.

所以我发现了这个问题,这表明问题是组件有@Input)_没有设置的参数,但是,如果我像这样修改我的测试:

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

然后我仍然得到相同的问题,同样,如果我@Input()从组件中删除注释,仍然没有区别.我怎样才能通过这些测试？

Answer 1

这是新的Angular Cli的问题.运行测试,--sourcemaps=false您将收到正确的错误消息.

详情请见:https://github.com/angular/angular-cli/issues/7296

编辑:

这方面的简写是:

ng test -sm=false

从角度6开始,命令是:

ng test --source-map=false

Answer 2

我有使用angualar cli 6的相同问题,我使用此标记来获取正确的错误消息:

ng test --source-map=false

也许它会帮助某人:).

Answer 3

对于我的情况,有一个模拟数据问题,如果是Array,我string从模拟返回.

someApi = fixture.debugElement.injector.get(SomeApi);
spyOn(someApi, 'someMethod')
  .and.returnValue(Observable.of('this is not a string but array'));

错误消息实在令人分心,并没有告诉实际错误.运行ng test --source=false指向正确的错误和行,并帮助我快速修复它.

很多时候,当模拟数据不完整或不正确时会发生这种情况.

Answer 4

您可以在component.ts中将input()属性设置为默认值

@Input() tableColumns: Array<any> = [];  
@Input() pageObj: any = '';

要么

以下列方式修改component.spec.ts文件,

beforeEach(() => {  
   fixture = TestBed.createComponent(MyComponent);  
   component = fixture.componentInstance;  
   component.tableColumns = [];  
   component.pageObj = '';  
   fixture.detectChanges();  
});

Answer 5

这可能与 Chrome 隐藏实际的测试错误有关。测试区域将混淆一些无法加载的模拟 http 工厂，因此这就是它将报告的错误。错误很可能发生在 ngOnInit 区域，其中一个对象需要子对象，但它们没有定义。

要尝试找出错误的根源，请暂时切换到 PhantomJS，它似乎较少受到这些初始化错误的影响，并且有望向您报告实际错误。有几次我发现初始化时预期的对象不完整。IE：

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;

    component.object = {}
// should be:
    component.object = {"innerObjectThatIsNeeded" : []}

更正该对象可以让 PhantomJS 完成，并且 Chrome 可以继续进行下一个测试。

除此之外，我还没有看到从 Chrome 中删除该问题的解决方案。一如既往地尝试采用“删除代码，直到错误消失”的策略来追查错误。

更新：请注意，这是一个相当旧的答案，我不建议再使用 PhantomJS （EOL）。浏览器测试报告已经好多了，如果 Chrome 让你感到悲伤，那么试试 Firefox，它现在也能很好地运行测试。