Angular 2单元测试 - 获取错误无法加载'ng:///DynamicTestModule/module.ngfactory.js'

Question

我有angular 2 webpack应用程序,所有webpack,karma配置根据angular.io webpack指南创建.我没有使用aot.我正在编写茉莉花单元测试规范来测试我的组件.首先我尝试没有异步块,在这种情况下,单元测试只执行执行直到fixture.detectChanges()调用,之后的代码没有执行.似乎fixture.detectChanges调用无限地被阻止.

我尝试在async块中包含代码.然后我得到以下错误.错误:无法在'XMLHttpRequest'上执行'send':无法加载'ng:/// DynamicTestModule /module.ngfactory.js'

---

没有异步的代码

beforeeach(()=> {
TestBed.configureTestingModule({
imports:[],
declaration :[Mycomp],
providers:[{ provide:MyService, useclass:MyMockService}]
});
 fixture=TestBed.createComponent(Mycomp);
 console.log(' before detect changes'):
 fixture.detectChanges():
 console.log('after detect changes');// this is not getting   
    logged .. karma shows 0 of 1 executed successfully

 });

---

用异步

  beforeeach(async(()=> {
 TestBed.configureTestingModule({
  imports:[],
  declaration :[Mycomp],
  providers:[{ provide:MyService,       useclass:MyMockService}]
  });
   fixture=TestBed.createComponent(Mycomp);
    fixture.detectChanges():
  }));

获取错误无法加载dynamictestmodule/module.ngfactory.js

Answer 1

我昨天亲自遇到了这个问题.问题是我在组件类中有一个我没有在测试中设置的Input()属性.例如,在my-component.ts中:

@Component({
  selector: 'my-component'
})
export class MyComponent {
  @Input() title: string;
}

和my-component.spec.ts:

beforeEach(() => {
  fixture = TestBed.createComponent(MyComponent);
  component = fixture.componentInstance;
  component.title = 'Hello there!' // <-- this is required!
  fixture.detectChanges();
});

或者您可以在某处提供组件中的默认值.无论哪种方式,如果没有设置任何输入,测试将崩溃,你将得到那个不直观的错误.

注意:运行ng test -sm=false将提供导致问题的实际错误消息.信用:https://stackoverflow.com/a/45802115/61311

Answer 2

要找出导致错误的原因,请禁用源映射:

对于angular-cli> = v6.x:

ng test --source-map=false

对于angular-cli v1.x:

ng test -sm=false

然后,您将看到一个更好的错误,例如"无法在导致错误的实际源文件中读取未定义的属性'x' .出于某种原因,现在测试中有一个源映射的错误,你只是得到了这个神秘的错误.

Answer 3

运行测试--sourcemaps=false不会让Karma静默失败,而是给你一些关于错误的细节.

Answer 4

再加上Dan Field的回答

这是1.2.2或更高Angular Cli版本的问题.运行测试,您将收到正确的错误消息.--sourcemaps=false

ng test --sourcemaps = false

这方面的简写是:

ng test -sm = false

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

Answer 5

我也有这个问题,这是由于格式错误的模拟数据.在我的组件中,我有一个服务,它进行了一个http调用.

类似的东西:( 服务代码)

getData() {
   return this.http.get(obj);
}

在组件中我调用了这个函数并订阅了它:( 组件代码)

this.service.getData().subscribe((data) => {
  this.componentData = data.things; //**<=== part that broke everything**
}, (error) => {
  console.log(error);
});

解:

当我模拟出服务函数时,我无法返回具有该属性的数据things.这就是导致XMLHttpRequest失败的原因,我猜想看起来好像发生了错误就像是HTTP请求一样.确保我在任何模拟的HTTP请求上返回了正确的属性修复了问题.

希望这可以解决问题.下面是mock实现的代码.

(component.specs)

function fakeSubscribe(returnValue,errorValue) {
  return {
    subscribe:function(callback,error){
      callback(returnValue);
      error(errorValue);
    }
  }
}



 class MockService {
      getData() {
        var fakeData = {
          things:[]
        }
        return fakeSubscribe(fakeData,0);
      }
   }