Angular 2单元测试 - 获取错误无法加载＆＃39; ng：///DynamicTestModule/module.ngfactory.js'

Question

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

我尝试在async块中包含代码。 然后我得到以下错误。 错误：无法执行＆＃39;发送＆＃39; on＆＃39; XMLHttpRequest＆＃39; ：无法加载＆＃39; 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＆gt; = v6.x：

ng test --source-map=false

对于angular-cli v1.x：

ng test -sm=false

然后您会看到更好的错误，例如＆＃34;无法阅读财产＆＃39; x＆＃39;未定义＆＃34; 在实际源文件中导致错误。出于某种原因，现在测试中有一个源映射的错误，你只是得到了这个神秘的错误。

Answer 3

使用--sourcemaps=false运行测试不会让Karma静默失败，而是会为您提供有关错误的详细信息。

Answer 4

添加Dan Field的答案

这是Angular Cli版 1.2.2或更新的问题。使用--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);
      }
   }

Answer 6

这是我在Angular中遇到过的最具欺骗性的错误消息。

在我的情况下，它与发送无关，与 XmlHttpRequest 无关 - 至少在尝试关注消息时你猜的级别上没有

这也是嘲弄一个类，即ngrx / store。我在容器中引入了两个Observable方法，之前我没有包含在我的模型类中，当我开始使用它时我忘了这样做。一旦添加到模型中，错误就消失了。

...让Karma高兴能够从XmlHttpRequest 执行'发送'，无论它意味着什么。

Answer 7

第二天我被同样的错误所困扰 - 这次问题被埋没在HTML文件中。对*ngIf

使用简单的数组长度测试

<ng-container *ngIf="myArray.length > 0">

必须重构为

<ng-container *ngIf="myArrayNotEmpty">

使用getter：

get myArrayNotEmpty(){
  return this.myArray && this.myArray.length > 0;
}

虽然有一个非常误导和无益的信息涵盖了如此多种原因，但我有点恼火。

Answer 8

就我而言，我的模拟服务缺少ngOnInit方法中组件访问的一些公共变量。

Answer 9

我也有这个问题。在我的* ngIf检查之一中，结果是在我的组件中一个简单的null引用错误。

我建议运行ng serve并检查组件在浏览器中是否正常运行，或者只是运行 ng test --source-map = false 以获得更有用的错误消息。

Answer 10

访问未定义对象的变量时遇到相同的错误。

示例：

组件：

soemthing = {}

模板：

<demo-something [someinput]="something.anotherthing.data"> ...

因此，定义了something，未定义anotherthing，因此无法访问data。

非常令人讨厌的错误，据我所知还没有在列表中：）