Tests unitaires Angular 2 - erreur de chargement de 'ng:///DynamicTestModule/module.ngfactory.js'.

Question

J'ai une application angular 2 webpack, toute la configuration webpack,karma créée selon le guide webpack d'angular.io. Je n'utilise pas aot. J'écris des tests unitaires Jasmine pour tester mes composants. J'ai d'abord essayé sans bloc asynchrone, dans ce cas, le test unitaire est exécuté seulement jusqu'à l'appel de fixture.detectChanges(), le code après cela n'est pas exécuté. Il semble que l'appel fixture.detectChanges soit bloqué à l'infini.

J'ai essayé d'inclure le code dans un bloc asynchrone. J'obtiens alors l'erreur suivante. Error:Failed to execute 'send' on 'XMLHttpRequest' : Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'.

---

Code sans asynchronisme

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

 });

---

Avec l'asynchronisme

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

Obtention de l'erreur "Failed to load dynamictestmodule/module.ngfactory.js".

Answer 1

J'ai rencontré ce problème moi-même hier. Le problème était que j'avais une propriété Input() sur ma classe de composant que je n'avais pas définie dans le test. Ainsi, par exemple, dans mon-composant.ts :

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

et mon-composant.spec.ts :

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

Ou vous pourriez fournir une valeur par défaut dans le composant quelque part. Dans tous les cas, le test se plantera si des entrées ne sont pas définies et vous obtiendrez cette erreur peu intuitive.

Note : La course ng test -sm=false donnera le message d'erreur réel causant le problème. Crédit : https://stackoverflow.com/a/45802115/61311

Answer 2

Pour découvrir la cause réelle de l'erreur, désactivez les cartes sources :

Pour angular-cli >= v6.x :

ng test --source-map=false

Pour angular-cli v1.x :

ng test -sm=false

Vous verrez alors une meilleure erreur, par exemple "Impossible de lire la propriété 'x' d'undefined". dans le fichier source qui cause l'erreur. . Pour une raison quelconque, il y a un bogue avec les cartes de source en ce moment dans les tests, et vous obtenez juste cette erreur cryptique.

Answer 3

Exécuter des tests avec --sourcemaps=false ne fera pas échouer Karma silencieusement mais vous donnera quelques détails sur l'erreur.

Answer 4

Complément à la réponse de Dan Field

C'est un problème avec le Angular Cli version 1.2.2 ou plus récent . Exécutez votre test avec --sourcemaps=false et vous obtiendrez les bons messages d'erreur.

ng test --sourcemaps=false

Le raccourci pour cela est :

ng test -sm=false

Voir les détails ici : https://github.com/angular/angular-cli/issues/7296

Answer 5

J'ai également eu ce problème et il était dû à des données factices mal formées. Dans mon composant, j'avais un service qui faisait un appel http.

quelque chose comme : ( code de service )

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

Dans le composant, j'ai appelé cette fonction et je m'y suis abonné : ( code de composant )

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

Solution :

Lorsque j'ai simulé la fonction de service, je n'ai pas réussi à renvoyer les données qui avaient l'attribut things . C'est ce qui a causé l'échec de XMLHttpRequest, je suppose que pour Angular, l'erreur semblait se produire comme s'il s'agissait d'une requête HTTP. En m'assurant que je renvoie les attributs corrects sur toutes les requêtes HTTP simulées, les problèmes ont été résolus.

J'espère que ça va éclaircir les choses. Voici le code pour l'implémentation de l'objet fantaisie.

( composant.specs )

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

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