Como faço para depurar um erro “[Object ErrorEvent] lançado” em meus testes de Karma / Jasmine?

Eu tenho vários testes com falha que apenas produzem [object ErrorEvent] thrown. Não vejo nada no console que me ajude a identificar o código ofensivo. Há algo que eu preciso fazer para rastreá-los?

[EDIT]: Estou executando o Karma v1.70, Jasmine v2.7.0

Para sua informação: você pode encontrar o erro exato lançado apenas abrindo o console do DevTools quando seus testes estiverem em execução.

Como uma correção rápida, você pode tentar executar seus testes sem mapas de origem :

CLI v6.0.8 e superior
--source-map=false

CLI v6.0.x primeiras versões
--sourceMap=false

CLI v1.x
--sourcemaps=false

O atalho ng test -sm=falsetambém pode funcionar

Há um problema em aberto nesse https://github.com/angular/angular-cli/issues/7296

ATUALIZAÇÃO : Eu também tive esse problema, então migrei para o CLI mais recente e certifique-se de que todos os pacotes estão atualizados package.jsontambém. Reinstalei totalmente o, node_modulesentão agora o problema foi embora.

Se sourcemap = false não ajudar, tente 1) abrir seu navegador executando os testes 2) clique no botão de depuração 3) abra o console

O erro estará aí

Tente se você receber uma mensagem de erro mais descritiva executando o teste no terminal, como este:

ng test -sm=false

Em seu teste, você pode substituir

it('should...')

com

fit('should...') 

Agora, apenas os testes precedidos por ajuste serão executados. Para deixar o navegador aberto após executar o teste, execute o teste assim:

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

Pessoalmente, encontrei esse erro duas vezes. Ambos foram acionados apenas ao chamar fixture.detectChanges ().

Na primeira vez, resolvi usar a interpolação de strings com mais segurança no meu arquivo .html.

Exemplo inseguro :

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

Exemplo de seguro (r) (observe o ponto de interrogação):

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

O mesmo pode se aplicar à vinculação de propriedade:

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

Na segunda vez, eu estava usando um DatePipe em meu arquivo .html, mas a propriedade mock em que usei não era uma data.

arquivo .html:

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

Arquivo .ts (dados fictícios) ( errado ):

let startDate = 'blablah';

Arquivo .ts (dados fictícios) ( correto ):

let startDate = '2018-01-26';

Isso ocorre porque a estrutura jasmine não pode manipular o tipo ErrorEvent, portanto, não extrai a mensagem de erro e chama error.toString()esse objeto.

Acabei de registrar um problema no jasmine repo https://github.com/jasmine/jasmine/issues/1594

Contanto que não seja corrigido, você pode corrigir temporariamente o pacote jasmine instalado na pasta node_modules. No meu caso é

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

e, em seguida, altere a implementação do ExceptionFormatter deste

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

para isso

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

Isso ajuda a identificar o problema.

Para mim, estava relacionado a ter uma promessa resolvida na forma ngOnInitde um componente. Eu tive que usar async, fakeAsynce carrapatos, bem como apagando o serviço assíncrono comspyOn

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

Angular - como testar a unidade de componente com chamada de serviço assíncrona

TL; DR: pode estar relacionado ao roteamento de teste.

Eu também estou conseguindo [object ErrorEvent] thrown. Uma hora depois, rastreou até uma linha de código.

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

O problema está no ambiente de teste tentando avaliar this.route.snapshot.paramMap.get('id') .

Se eu substituí-lo por 0 , [object ErrorEvent] thrownvai embora.

Meu userService tem um usuário assim:

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

assim 0 apenas pega esse usuário, no índice 0.

Caso contrário, quando normalmente estou executando meu aplicativo, this.route.snapshot.paramMap.get('id') é avaliado quando o usuário seleciona um usuário para editar na minha tabela de usuários.

Então, em meu HTML, *ngFor="let user of users; index as i"loops para exibir todos os usuários, routerLink="/edit/{{i}}"então você pode clicar nos botões de edição para cada usuário, que quando clicado vai para, por exemplo, http://localhost:4200/edit/0editar os detalhes do usuário administrador mencionado acima.

que tal a limpeza após cada caso de teste:

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

Eu tive o mesmo problema. Uma forma de esse erro acontecer é quando você tenta acessar qualquer coisa nula ou indefinida no modelo. Certifique-se de ter verificação de segurança nessas variáveis.

Por exemplo, isso irá lançar [object: ErrorEvent] quando a configuração é indefinida no carregamento do componente.

template.html

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

Faça isso ao invés

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

O que pode ajudar é, se você tiver a janela do Chrome aberta para o executor do teste Karma, abrir as ferramentas de desenvolvedor e verificar o console lá. Para mim, isso me ajudou a descobrir que o aplicativo não poderia usar o método Array.findIndex em uma matriz indefinida (porque a estrutura de dados foi organizada por uma string de data, como data [2018] [3] [28], e Acontece que eu estava apontando para a data errada), mas, ainda assim, em vez de apenas parar no erro, o teste continuou em execução.

Para mim, o problema era que eu tinha um teste em que estava usando acidentalmente a biblioteca auth0-lock .

Parecia ser um problema assíncrono, porque depois de adicionar its suficientes em uma das especificações do meu componente, consegui obter uma mensagem de erro utilizável que apontava para um arquivo e uma linha dentro desse arquivo (estava relacionado ao paramMap.

Na especificação que testou o ParamMap, acabei de adicionar:

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

Você pode ter uma corrida ou um teste assíncrono que não está configurado corretamente ou é usado incorretamente. Eu diria que o caso de depuração precisa ser corrigido e ignorar que a linha de comando passa. Continue atualizando o runner do teste karma (navegador) caso o erro [object ErrorEvent] thrownapareça de forma intermitente e certifique-se de ter implementado a condição assíncrona corretamente.

Espero que isso funcione.

[object ErrorEvent] lançado

Este erro mostra que você tem algo indefinido. A maneira mais fácil de depurar com minha experiência é:

it('should create', () => {
    console.log(component);
    // You can check in the browser log which property is undefined
    });

No meu caso o problema era com o serviço, pois um dos objetos ficará indefinido durante a execução dos testes.

A amostra de código de serviço era algo como o acesso abaixo ao dom,

  const elem = this.document.querySelector(element) as HTMLElement;
  elem.scrollIntoView({param1: ''});

As especificações referentes a este serviço estavam falhando com o erro ' [objeto ErrorEvent] lançado '.

Eu zombei do meu objeto de serviço dentro de todas as especificações que se referiam a isso e o problema foi resolvido.

Serviço de simulação

class MockService {
serviceMethod(div) : void {
  testElement = document.querySelector('div') as HTMLElement;
  return testElement;
  } 
}

E use este objeto de serviço simulado em provedores conforme abaixo,

beforeEach(async(() => {

TestBed.configureTestingModule({
  declarations: [Component],
  providers: [
     { provide: Service, useClass: MockService },
    ],
})
  .compileComponents();
}));

Eu estava usando um proxy em meu aplicativo definido em proxy.conf.json como:

'/api': { 'target': 'some path', 'changeOrigin': false }

Como o Karma não estava ciente desse proxy, ele continuou rastreando erros no console que o terminal da API não pôde ser encontrado. Então, depois de olhar a documentação do Karma, descobri que o que eu poderia fazer era adicionar a propriedade "proxies" em karma.conf.js com o mesmo objeto do proxy.conf.json:

proxies: { '/api': { 'target': 'some path', 'changeOrigin': false }}

O erro no console havia desaparecido e o [objeto errorEvent] não era mais lançado.

No final, o que pode funcionar para mim:

    TestBed.resetTestingModule();
  })