¿Cómo depuro un error" [object ErrorEvent] thrown " en mis pruebas Karma/Jasmine?

Pruebe si recibe un mensaje de error más descriptivo ejecutando la prueba desde el terminal, como este:

ng test -sm=false

En su prueba, puede reemplazar

it('should...')

Con

fit('should...') 

Ahora solo se ejecutarán las pruebas precedidas por fit. Para dejar el navegador abierto después de ejecutar la prueba, ejecute la prueba de la siguiente manera:

ng test -sm=false --single-run false

Personalmente, he encontrado este error dos veces. Ambos solo se activaron al llamar a fixture.DetectChanges().

El primera vez , lo resolví mediante el uso de interpolación de cadenas de forma más segura en mi .archivo html.

Unsafe ejemplo:

<p>{{user.firstName}}</p>

Safe (r) ejemplo (note el signo de interrogación):

<p>{{user?.firstName}}</p>

Lo mismo puede aplicarse a la vinculación de propiedad:

<p [innerText]="user?.firstName"></p>

El segundo tiempo, yo estaba usando un DatePipe en mi .archivo html, pero la propiedad simulada en la que lo utilicé no era una fecha.

.archivo html:

<p>{{startDate | date: 'dd-MM-yyyy'}}</p>

.archivo ts (datos simulados) (incorrecto):

let startDate = 'blablah';

.archivo ts (mock-data) (correcto):

let startDate = '2018-01-26';

Si sourcemap = false no ayuda, intente 1) abra su navegador ejecutando las pruebas 2) haga clic en el botón depurar 3) abra la consola

El error estará ahí

TL; DR: Puede estar relacionado con el enrutamiento de pruebas.

Estoy recibiendo [object ErrorEvent] thrown también. Una hora después, lo rastreé hasta una línea de código.

this.username = this.userService.getUser(this.route.snapshot.paramMap.get('id'))[0];

El problema radica en que el entorno de prueba intenta evaluar this.route.snapshot.paramMap.get('id').

Si lo sustituyo por 0, [object ErrorEvent] thrown desaparece.

My UserService tiene un usuario así:

public users = [ ["admin", "First name", "Surname", etc... ] ].

Así que 0 solo obtiene este usuario, en index 0.

De lo contrario, cuando se ejecuta normalmente mi aplicación, this.route.snapshot.paramMap.get('id') se evalúa cuando el usuario selecciona un usuario para editar de mi tabla de usuarios.

Así que en mi HTML, *ngFor="let user of users; index as i" bucles para mostrar todos los usuarios luego routerLink="/edit/{{i}}" para que pueda hacer clic en los botones de edición para cada usuario, que cuando se hace clic ir a por ejemplo http://localhost:4200/edit/0 para editar los detalles del usuario administrador antes mencionado.

Para mí estaba relacionado con tener una promesa resuelta en el ngOnInit de un componente. Tuve que usar async, fakeAsync y marque así como stubbing el servicio async con spyOn

beforeEach(async(
  //... initialise testbed and component
))
beforeEach(fakeAsync(
  // ... setup mocks then call:
  component.ngOnInit()
  tick()
  fixture.detectChanges()
))

Angular-Cómo probar un componente con una llamada de servicio asíncrona

Esto se debe a que el framework jasmine no puede manejar el tipo ErrorEvent, por lo que no extrae el mensaje de error y llama a error.toString() en ese objeto.

Acabo de presentar un problema en jasmine repo https://github.com/jasmine/jasmine/issues/1594

Mientras no esté arreglado, puede parchear temporalmente su paquete jasmine instalado en la carpeta node_modules. En mi caso es

node_modules/jasmine/node_modules/lib/jasmine-core/jasmine.js

Y luego cambiar la implementación de ExceptionFormatter de esto

if (error.name && error.message) {
    message += error.name + ': ' + error.message;
} else {
    message += error.toString() + ' thrown';
}

A esto

if (error.name && error.message) {
    message += error.name + ': ' + error.message;
} else if (error.message) {
    message += error.message;
} else {
    message += error.toString() + ' thrown';
}

Ayuda a identificar el problema.

Yo tenía el mismo problema. Una forma en que ocurre este error es cuando intenta acceder a cualquier cosa nula o indefinida en la plantilla. Asegúrese de tener una comprobación de seguridad en esas variables.

Por ejemplo, esto lanzará [object: ErrorEvent] cuando la configuración no esté definida en la carga del componente.

Plantilla.html

<div *ngIf="config.options">
   .....
   ......
</div>

Haga esto en su lugar

<div *ngIf="config?.options">
   .....
   ......
</div>

Para mí el problema fue que tuve una prueba en la que accidentalmente estaba usando la biblioteca auth0-lock.

Parecía ser un problema asincrónico, porque después de agregar suficientes it s en una de mis especificaciones de componentes, pude obtener un mensaje de error utilizable que apuntaba a un archivo y una línea dentro de ese archivo (estaba relacionado con paramMap.

En la especificación que probó ParamMap, acabo de agregar:

  describe('this test', () => {
    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });
  });

Qué pasa con la limpieza después de cada caso de prueba:

  afterEach(() => {
    TestBed.resetTestingModule();
  })

Es posible que tenga una prueba race o async que no esté configurada correctamente o que se use incorrectamente. Asumiría que el caso de depuración necesita ser arreglado e ignoraría que la línea de comandos pasa. Simplemente mantenga actualizado el karma test runner (browser) en caso de que el error [object ErrorEvent] thrown aparezca intermitentemente, luego asegúrese de haber implementado la condición async correctamente.

Esperemos que esto funcione.