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

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?

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

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 :).

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.

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

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

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.

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 :)

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.

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.

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í

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.