Las pruebas angulares fallan con Error al ejecutar 'enviar' en 'XMLHttpRequest'


145

Estoy tratando de probar mi componente angular 4.1.0 -

export class CellComponent implements OnInit {
  lines: Observable<Array<ILine>>;
  @Input() dep: string;
  @Input() embedded: boolean;
  @Input() dashboard: boolean;
  constructor(
    public dataService: CellService,
    private route: ActivatedRoute,
    private router: Router, private store: Store<AppStore>) {
  }
}

Sin embargo, una simple prueba de "debería crear" arroja este error críptico ...

NetworkError: no se pudo ejecutar 'enviar' en 'XMLHttpRequest': no ​​se pudo cargar 'ng: ///DynamicTestModule/module.ngfactory.js'.

así que encontré esta pregunta, que sugiere que el problema es que el componente tiene @Input)_parámetros que no están configurados, sin embargo, si modifico mi prueba así:

  it('should create', inject([CellComponent], (cmp: CellComponent) => {
    cmp.dep = '';
    cmp.embedded = false;
    cmp.dashboard = false;
    expect(cmp).toBeTruthy();
  }));

entonces sigo teniendo el mismo problema, de manera similar, si elimino las @Input()anotaciones del componente, todavía no hay diferencia. ¿Cómo puedo hacer que pasen estas pruebas?


1
Para crear un componente, debe proporcionar todas las dependencias. ¿Puedes mostrar toda la configuración de tu prueba? Intentaré reproducir el problema en plnkr
Aleksandr Petrovskij

1
Tuve este mismo problema y encontré las mismas publicaciones que tú. Pude encontrar una solución. Terminé publicando sobre la otra pregunta, pero puedes echar un vistazo aquí: stackoverflow.com/a/45419372/6739517 ¡ Espero que ayude!
Niles Tanner

Respuestas:


342

Este es un problema del nuevo Angular Cli. Ejecute su prueba con --sourcemaps=falsey recibirá los mensajes de error correctos.

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

EDITAR:

Taquigrafía para esto es:

ng test -sm=false

A partir de angular 6, el comando es:

ng test --source-map=false


19
Eres un héroe absoluto. Estaba golpeando mi cabeza contra la pared, frustrado por la falta de información de los mensajes de error de prueba de la unidad angular, hasta que encontré esto. Muy agradecido.
Alan Smith

1
¡Esta respuesta realmente me salvó el día! Estuve a punto de renunciar al desarrollo en general después de pasar todo el día y la noche tratando de arreglar esto solo para poder dejar de ser la persona que falla la compilación
user1806692

Hoy me encontré con este mensaje de error: HeadlessChrome 65.0.3325 (Mac OS X 10.13.4) ERROR {"mensaje": "Error de script. \ Nat: 0: 0", "str": "Error de script. \ Nat: 0 : 0 "} Y eliminar --sourcemap = false muestra más información.
penghui

11
ng prueba --source-map = falsos ... de obras en angular CLI 6
danday74

@ danday74 FTW! Después de escribir archivos de prueba complicados, quedar atrapado en esto es brutal.
Brad Richardson

21

Tuve el mismo problema al usar angualar cli 6, he usado esta etiqueta para obtener el mensaje de error correcto:

ng test --source-map=false

Tal vez ayude a alguien :).


8

Para mi caso, había un problema de datos simulados y, en caso de Arrayque volviera stringdel simulacro.

someApi = fixture.debugElement.injector.get(SomeApi);
spyOn(someApi, 'someMethod')
  .and.returnValue(Observable.of('this is not a string but array'));

El mensaje de error realmente distrae y no indica el error real. Running ng test --source=falseseñaló el error y la línea correctos, y me ayudó a solucionarlo rápidamente.

Muchas veces sucede cuando se burlan de datos incompletos o incorrectos.


7

Puede establecer la propiedad input () en el valor predeterminado en component.ts

@Input() tableColumns: Array<any> = [];  
@Input() pageObj: any = '';

O

Modifique su archivo component.spec.ts de la siguiente manera,

beforeEach(() => {  
   fixture = TestBed.createComponent(MyComponent);  
   component = fixture.componentInstance;  
   component.tableColumns = [];  
   component.pageObj = '';  
   fixture.detectChanges();  
});

4

Como se sugirió anteriormente aquí: https://stackoverflow.com/a/45570571/7085047 mi problema estaba en mi ngOnInit. Estaba llamando a un proxy de controlador REST generado por swagger simulado. Estaba volviendo nulo, y me estaba suscribiendo a ese nulo, que no funciona ...

El error regresó:

Failed to load ng:///DynamicTestModule/MockNodeDashboardComponent_Host.ngfactory.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Solucioné el problema usando ts-mockito: https://github.com/NagRock/ts-mockito

Agregué código para crear una instancia simulada como esta:

import { mock, instance, when } from 'ts-mockito';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { MockScenario } from './vcmts-api-client/model/MockScenario';

const MockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = mock(VcmtsnodemockresourceApi);
const obs = Observable.create((observer: Observer<MockScenario[]>) => {
  observer.next(new Array<MockScenario>());
  observer.complete();
});
when(MockVcmtsnodemockresourceApi.getMockScenariosUsingGET()).thenReturn(obs);
const instanceMockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = instance(MockVcmtsnodemockresourceApi);

Y luego agregó la instancia a la matriz de proveedores de la prueba de esta manera:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      ...
      providers: [
        ...
        { provide: VcmtsnodemockresourceApi, useValue: instanceMockVcmtsnodemockresourceApi },
        ...
      ]        
    }).compileComponents();
  }));

Si tiene una nueva pregunta, hágala haciendo clic en el botón Hacer pregunta . Incluya un enlace a esta pregunta si ayuda a proporcionar contexto. - De la opinión
Anton Balaniuc

parecía que mi síntoma era el mismo que el OP, así que pensé que la gente podría encontrar útil la solución que funcionó para mí ...
Datum Geek

3

Esto puede estar relacionado con que Chrome oculte un error de prueba real. El área de prueba confundirá a una fábrica falsa de http que no puede cargar y, por lo tanto, ese es el error que informará. Lo más probable es que el error sea alrededor del área ngOnInit donde un objeto, por ejemplo, espera subobjetos y no están definidos.

Para tratar de llegar al final del error, cambie a PhantomJS temporalmente, que parece sufrir menos de estos errores de inicialización y con suerte le informará el error real. En varias ocasiones descubrí que un objeto esperado en la inicialización no estaba completo. ES DECIR:

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;

    component.object = {}
// should be:
    component.object = {"innerObjectThatIsNeeded" : []}

La corrección del objeto permitió que PhantomJS se completara y también que Chrome pasara a la siguiente prueba.

Aparte de eso, no he visto una solución para eliminar el problema de Chrome. Como siempre, intente adoptar una política de "eliminar el código, hasta que el error desaparezca" para perseguir el error.

ACTUALIZACIÓN: Tenga en cuenta que esta es una respuesta bastante antigua, no recomendaría usar PhantomJS nunca más (EOL). Los informes de prueba del navegador han mejorado mucho y si Chrome te da pena, prueba Firefox, que también funciona muy bien hoy en día.


2

También tuve este error, cuya verdad es bastante poco comunicativa.

Estaba relacionado con las llamadas HTTP a través de mis servicios

Yo uso myService.ts con 2 métodos

get();
getAll();

Me estoy burlando de este servicio: mockMyService.ts

El error estaba aquí porque mi componente estaba usando el método getAll () que olvidé implementar en el mockMyService, así que simplemente agregué el método:

private mockObjects = [
{
  'id': '1',
  'champ1': 'TECH',
  'champ2': 2,
  'champ3': 'Data bidon'
},
{
  'id': '2',
  'champ1': 'TECH',
  'champ2': 2,
  'champ3': 'Data au pif'
},
{
  'id': '3',
  'champ1': 'FUNC',
  'champ2': 3,
  'champ3': 'Data quelconque'
},
 ];

getAll(): Observable<any> {
  return Observable.of(this.mockObjects);
}

El error se fue :)


2

Me enfrenté al mismo problema y descubrí que para solucionarlo, debe configurar sus entradas para el componente en el método antes de cada uno, como se muestra a continuación:

beforeEach(() => {
    fixture = TestBed.createComponent(CellComponent );
    cmp = fixture.debugElement.componentInstance;
    cmp.dep = '';
    cmp.embedded = false;
    cmp.dashboard = false;
    fixture.detectChanges();
});

Esto definitivamente resolverá su problema.


1

En mi caso, el culpable se observable.timeout(x).retry(y)aplicó en algún lugar del Observable devuelto en el nivel de clase de servicio, luego nuevamente en el componente que estaba usando ese servicio.

Todo funcionó correctamente en el navegador hasta angular-cli 1.4. Luego comenzó a fallar durante las pruebas de Karma (con un error tan tonto). La solución fue, por supuesto, ordenar estos operadores de tiempo de espera / reintento.


1

Para mí, este mensaje aparece cuando un simulacro es falso en mis pruebas: por lo general, proporciona el servicio simulado en el arranque de sus pruebas. Si su simulación es incompleta o falsa, entonces angular devuelve este estúpido error.

Más información sobre mi caso aquí


0

Lo que estaría haciendo es:

Agregue console.log () s, línea tras línea en ngOnint () y descubra qué tan lejos llega, luego inspeccione la línea por la que no pasará.

Ex:

ngOnInit() {
    this.route.paramMap
        .switchMap(params => {
            this.busy = true;
            this.updateErrors(null);

            console.log(params);

            **const id = params.get('id');**
            console.log(id);

            if (id === 'new') {
                this.editMode = true;
                return Observable.of(GroupComponent.newGroup());
            }
            return this.apiService.getGroup(id);
        })
    }

Esto estaba fallando en mi prueba con el mismo error en esta publicación. Como se muestra arriba, tenía dos console.logs. El primero pasó por alto, pero el segundo no. Entonces me di cuenta de que el problema está en línea const id = params.get ('id'); y lo arreglé

Espero que esto ayude a alguien.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.