web-dev-qa-db-fra.com

Test d'unité angulaire 2 - erreur rencontrée Impossible de charger 'ng: ///DynamicTestModule/module.ngfactory.js'

J'ai 2 applications Webpack angulaires, tous les Webpack, la configuration de karma créée conformément au guide de Webpack angular.io. Je n'utilise pas . J'écris jasmine unit test spec pour tester mes composants . J'ai d'abord essayé sans bloc asynchrone; appel, le code après cela ne soit pas exécuté. On dirait que l'appel fixture.detectChanges est bloqué à l'infini.

J'ai essayé en incluant du code dans le bloc asynchrone . Je reçois alors l'erreur suivante . Erreur: impossible d'exécuter 'send' sur 'XMLHttpRequest': impossible de charger 'ng: /// DynamicTestModule /module.ngfactory. js '

Code sans async 

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 async 

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

obtention de l'erreur Impossible de charger dynamictestmodule/module.ngfactory.js

angularwebpackkarma-runner
59
Amit Gaikwad

J'ai moi-même rencontré ce problè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 my-composant.ts:

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

et my-composant.spec.ts:

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

Ou vous pouvez fournir une valeur par défaut dans le composant quelque part. Dans les deux cas, le test échouera si des entrées ne sont pas définies et vous obtiendrez cette erreur non intuitive.

Remarque: Si vous exécutez ng test -sm=false, le message d'erreur réel à l'origine du problème est généré. Crédit: https://stackoverflow.com/a/45802115/61311

94
newclearwinter

Pour savoir ce qui cause réellement l'erreur, désactivez les cartes source:

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' de non définie" dans le fichier source actuel à l'origine de l'erreur . Pour des raisons diverses, il existe actuellement un bogue dans les sources d’aide lors des tests et vous obtenez juste cette erreur cryptique.

72
Dan Field

exécuter des tests avec --sourcemaps=false n'échouera pas Karma en silence mais vous donnera quelques détails sur l'erreur.

18
user776686

Ajout à la réponse de Dan Field

Ceci est un problème avec la version Angular Cli1.2.2 ou plus récente. Exécutez votre test avec --sourcemaps=false et vous obtiendrez les bons messages d'erreur.

ng test --sourcemaps = false

le raccourci pour ceci est:

ng test -sm = false

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

6
yugantar kumar

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

quelque chose comme: ( code de service )

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

Dans le composant j'ai appelé cette fonction et y ai souscrit: ( code du composant )

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

Solution:  

Lorsque je me suis moqué de la fonction de service, je n’ai pas pu renvoyer de données comportant l’attribut things. C’est ce qui a provoqué l’échec de XMLHttpRequest. Je pense que c’est comme si l’erreur s’était produite comme si c’était la requête HTTP. Le fait de m'assurer que les attributs corrects ont été renvoyés pour toutes les requêtes HTTP simulées a corrigé les problèmes. 

Espérons que cela arrange les choses. Vous trouverez ci-dessous le code pour la mise en œuvre de la maquette. 

( 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);
      }
   }
5
Niles Tanner

C'est le message d'erreur le plus décevant que j'ai jamais rencontré dans Angular.

Dans mon cas, cela n'avait rien à voir avec l'envoi , rien à voir avec XmlHttpRequest - du moins pas au niveau que vous devineriez en essayant de suivre le message.

Il s'agissait également de se moquer d'une classe, à savoir ngrx/store. J'ai introduit deux méthodes Observable dans un conteneur qui n'avait pas été inclus dans mon cours de maquette auparavant et j'ai oublié de le faire lorsque j'ai commencé à les utiliser. Une fois ajoutée à la maquette, l'erreur a disparu.

... laissant Karma heureux de pouvoir exécuter "envoyer" à partir de XmlHttpRequest quoi que cela signifie.

3
user776686

J'ai eu la même erreur le jour suivant - cette fois, le problème était enfoui dans le fichier HTML. Utilisation d'un simple test de longueur de tableau pour *ngIf

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

a dû être refondu dans

<ng-container *ngIf="myArrayNotEmpty">

avec un getter comme dans:

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

Je suis cependant un peu irrité par le fait qu'un message très trompeur et inutile est couvert par une telle variété de causes.

2
user776686

Dans mon cas, certaines variables publiques auxquelles le composant de la méthode ngOnInit a eu accès et qui manquent à mon service factice.

1
maia

Je viens d'avoir ce problème aussi. Il s’est avéré qu’il s’agissait d’une simple erreur de référence null dans mon composant lors de l’un de mes contrôles * ngIf. 

Je suggérerais de lancer ng serve et de vérifier que le composant fonctionne dans le navigateur sans erreur, ou tout simplement d'exécuter ng test --source-map = false pour obtenir un message d'erreur plus utile. 

0
Greg Quinn

J'ai eu la même erreur lorsque j'ai accédé à une variable d'un objet non défini.

Exemple:

Composant:

soemthing = {}

Modèle:

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

Donc, something a été défini, anotherthing n'était pas défini et data ne pouvait donc pas être consulté.

Erreur très ennuyeuse et pour autant que je sache, pas encore dans la liste :)

0
Stefan