Prueba de unidad angular 2: error de error al cargar ''ng:///DynamicTestModule/module.ngfactory.js''

webpack karma-runner

Question

Tengo la aplicación angular 2 webpack, toda la configuración de karma, karma creada según la guía angular.io webpack. No estoy usando mucho. Estoy escribiendo especificaciones de prueba de unidad de jazmín para probar mis componentes. Primero lo intenté sin bloqueo asíncrono, en ese caso, la prueba de unidad solo se ejecuta hasta la llamada fixture.detectChanges (), el código después de eso no se ejecuta. Parece que la llamada fixture.detectChanges se bloquea infinitamente.

Lo intenté incluyendo código en el bloque asíncrono. Entonces recibo el siguiente error. Error: Error al ejecutar ''enviar'' en ''XMLHttpRequest'': Error al cargar ''ng: /// DynamicTestModule /module.ngfactory.js''

Código sin asíncrono

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

 });

Con asíncrono

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

obteniendo error Error al cargar dynamictestmodule / module.ngfactory.js

Answer 1

Acabo de tener este problema también. Resultó ser un simple error de referencia nula en mi componente en una de mis comprobaciones * ngIf.

Sugeriría ejecutar ng serve y verificar que el componente funciona en el navegador sin errores, o simplemente ejecutar ng test --source-map = false para obtener un mensaje de error más útil.

Answer 2

Ayer me encontré con este problema. El problema era que tenía una propiedad Input () en mi clase de componente que no estaba configurando en la prueba. Entonces, por ejemplo, en my-component.ts:

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

y my-component.spec.ts:

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

O podría proporcionar un valor predeterminado en el componente en alguna parte. De cualquier manera, la prueba se bloqueará si alguna entrada no está configurada y obtendrá ese error poco intuitivo.

Nota: Ejecutar ng test -sm=false dará el mensaje de error real que causa el problema. Crédito: https://.com/a/45802115/61311

Answer 3

En mi caso, a mi servicio simulado le faltaban algunas variables públicas a las que accedía el componente en el método ngOnInit.

Answer 4

Este es el mensaje de error más engañoso que he encontrado en Angular.

En mi caso, no tenía nada que ver con el envío , nada que ver con XmlHttpRequest , al menos no en el nivel que adivinarías al intentar seguir el mensaje.

Se trataba también de burlarse de una clase, a saber, ngrx / store. Introduje dos métodos Observables en un contenedor que no había sido incluido en mi clase de maquetas antes y olvidé hacerlo cuando comencé a usarlos. Una vez agregado a la maqueta, el error desapareció.

... dejando a Karma feliz de poder ejecutar ''enviar'' desde XmlHttpRequest lo que sea que signifique.

Answer 5

Me mordió el mismo error al día siguiente, esta vez el problema estaba enterrado en el archivo HTML. Uso de una prueba de longitud de matriz simple para *ngIf

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

tuvo que ser refactorizado en

<ng-container *ngIf="myArrayNotEmpty">

con un getter como en:

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

Sin embargo, estoy un poco irritado porque esa variedad de causas está cubierta por un mensaje muy engañoso y poco útil.

Answer 6

Para averiguar qué es lo que realmente está causando el error, deshabilite los mapas fuente:

Para angular-cli> = v6.x:

ng test --source-map=false

Para angular-cli v1.x:

ng test -sm=false

Luego verá un error mejor, por ejemplo, "No se puede leer la propiedad ''x'' de indefinido" en el archivo fuente real que está causando el error . Por alguna razón, hay un error con los mapas fuente en este momento en las pruebas, y solo obtienes este error críptico.

Answer 7

También tuve este problema y se debió a datos simulados mal formados. En mi componente tenía un servicio que hacía una llamada http.

algo como: ( código de servicio )

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

En el componente, llamé a esta función y me suscribí a ella: ( código de componente )

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

Solución:

Cuando me burlé de la función de servicio, no pude devolver los datos que tenían los atributos. Esto es lo que causó el error XMLHttpRequest, supongo que angular parece que el error ocurrió como si fuera la solicitud HTTP. Asegurarme de que devolví los atributos correctos en cualquier solicitud HTTP simulada solucionó los problemas.

Espero que esto aclare las cosas. A continuación se muestra el código para la implementación del simulacro.

( componente.especificaciones )

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



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

Answer 8

ejecutar pruebas con --sourcemaps=false no le fallará a Karma en silencio, sino que le dará algunos detalles sobre el error.

Answer 9

Agregando a la respuesta de Dan Field

Este es un problema con la versión 1.2.2 de Angular Cli o posterior . Ejecute su prueba con --sourcemaps=false y obtendrá los mensajes de error correctos.

ng test --sourcemaps = false

taquigrafía para esto es:

ng test -sm = falso

Ver detalles aquí: https://github.com/angular/angular-cli/issues/7296