Як я можу виправити помилку "[object ErrorEvent] кинуто" в моїх тестах Karma / Jasmine?

У мене є кілька невдалих тестів, які тільки дають результат [object ErrorEvent] thrown. Я не бачу нічого в консолі, що допомагає мені точно визначити код, що порушує. Чи потрібно щось зробити, щоб відстежити їх?

[EDIT]: Я запускаю Karma v1.70, Жасмін v2.7.0

FYI: ви можете знайти точну помилку, яку викинули просто на відкритій консолі DevTools, коли ваші тести запущені.

Як швидке виправлення, ви можете спробувати запустити свої тести без вихідних карт :

CLI v6.0.8 і вище
--source-map=false

Ранні версії CLI v6.0.x
--sourceMap=false

CLI v1.x
--sourcemaps=false

Ярлик ng test -sm=falseтакож може працювати

Про це відкрито питання https://github.com/angular/angular-cli/isissue/7296

ОНОВЛЕННЯ : У мене була і ця проблема, тому я просто перейшов до останнього кліпу і переконайтесь, що всі пакунки оновлені, package.jsonі я повністю перевстановився, node_modulesтому проблема вийшла.

Якщо sourcemap = false не допомагає, спробуйте 1) відкрити веб-переглядач із запуском тестів; 2) натиснути кнопку налагодження 3) відкрити консоль

Помилка буде там

Спробуйте, якщо ви отримаєте більш описове повідомлення про помилку, запустивши тест з терміналу, наприклад:

ng test -sm=false

У своєму тесті ви можете замінити

it('should...')

з

fit('should...') 

Тепер працюватимуть лише тести, які передують придатності . Щоб залишити браузер відкритим після запуску тесту, запустіть тест так:

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

Особисто я вже двічі стикався з цією помилкою. Обидва спрацьовували лише під час виклику fixture.detectChanges ().

Перший раз, я вирішив його за допомогою рядка інтерполяції більш безпечно в моєму .html файл.

Небезпечний приклад:

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

Безпечний (r) приклад (зверніть увагу на знак питання):

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

Те саме може стосуватися і властивостей, пов'язаних із властивістю:

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

Другий раз, я використав DatePipe в моєму .html файлу, але знущатися властивістю , яке я використовував його не було побаченням.

.html файл:

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

.ts (макет-дані) файл ( неправильно ):

let startDate = 'blablah';

.ts (макет-дані) файл ( правильний ):

let startDate = '2018-01-26';

Це відбувається тому, що рамка жасмину не може обробляти тип ErrorEvent, тому він не витягує повідомлення про помилку і error.toString()натомість викликає цей об’єкт.

Щойно я подав питання на Jasmine repo https://github.com/jasmine/jasmine/isissue/1594

Поки це не виправлено, ви можете тимчасово виправити встановлений пакет жасмину в папку node_modules. У моєму випадку це так

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

а потім змінити реалізацію ExceptionFormatter з цього

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

до цього

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

Це допомагає визначити проблему.

Для мене це було пов'язано з вирішенням обіцянки ngOnInitв компоненті. Я повинен був використовувати async, fakeAsyncі тик, а також гасячи службу асинхронної зspyOn

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

Кутова - Як з'єднати тестовий компонент з асинхронним викликом служби

TL; DR: Це може бути пов'язано з тестуванням маршрутизації.

Я [object ErrorEvent] thrownтеж стаю . Через годину простежено це до одного рядка коду.

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

Проблема полягає в тому, що тестова середовище намагається оцінити this.route.snapshot.paramMap.get('id').

Якщо я заміню його 0, [object ErrorEvent] thrownвідходить.

У мого користувача Сервіс має такого користувача:

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

Тож 0просто отримує цього користувача в індексі 0.

В іншому випадку, коли зазвичай працює моє додаток, this.route.snapshot.paramMap.get('id')оцінюється, коли користувач вибирає користувача для редагування з моєї таблиці користувачів.

Тож у моєму HTML-коді *ngFor="let user of users; index as i"циклічно відображаються всі користувачі, routerLink="/edit/{{i}}"тож ви можете натиснути на кнопки редагування для кожного користувача, які при натисканні переходять до, наприклад, http://localhost:4200/edit/0для редагування вищезазначених даних адміністратора.

як щодо чищення після кожного тесту:

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

У мене була така ж проблема. Один із способів цієї помилки - це, коли ви намагаєтеся отримати доступ до чогось недійсного або невизначеного в шаблоні. Переконайтеся, що у вас є перевірка безпеки цієї змінної.

Наприклад, це буде кидати [object: ErrorEvent], коли config не визначено для завантаження компонента.

template.html

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

Зробіть це замість цього

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

Що може допомогти, якщо у вас відкриється вікно Chrome для тестового бігуна Karma, відкрити інструменти для розробників і перевірити консоль там. Для мене це допомогло з’ясувати, що додаток не може використовувати метод Array.findIndex для невизначеного масиву (оскільки структура даних була організована рядком дат, таким як дані [2018] [3] [28], і Я випадково вказував на неправильну дату), але все ж замість того, щоб просто зупинятися на помилці, тест продовжував працювати.

Для мене проблема полягала в тому, що у мене був тест, де я випадково використовував бібліотеку auth0-lock .

Це виявилося проблемою асинхронізації, оскільки після того, як я додав достатньо its в одній із моїх специфікацій компонентів, я зміг отримати корисне повідомлення про помилку, яке вказувало на файл та рядок у цьому файлі (це було пов’язано з paramMap.

У специфікації, яка тестувала ParamMap, я щойно додав:

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

У вас може бути гонка або асинхронний тест, який налаштований не зовсім правильно або використовується неправильно. Я б припустив, що випадок налагодження потрібно виправити і проігнорувати, що командний рядок проходить. Просто продовжуйте оновлювати тест-карник (браузер), якщо помилка [object ErrorEvent] thrownз’являється з перервами, тоді переконайтеся, що ви правильно виконали умову асинхронізації.

Сподіваємось, це працює.

[object ErrorEvent] кинуто

Ця помилка показує, що у вас щось не визначене. Найпростіший спосіб налагодити це зі свого досвіду:

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

У моєму випадку проблема була з сервісом, оскільки один із об’єктів буде невизначений під час запуску тестів.

Зразок службового коду був чимось на зразок нижче доступу до дому

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

Технічні характеристики, що посилаються на цю послугу, виявилися невдалими з помилкою " [object ErrorEvent] кінуць ".

Я знущався над своїм об’єктом обслуговування всередині специфікацій, які посилалися на це, і проблему було вирішено.

Сервіс-макети

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

І використовувати цей об’єкт макетної послуги в постачальників, як показано нижче,

beforeEach(async(() => {

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

Я використовував проксі-сервер у своїй програмі, визначений у proxy.conf.json, як:

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

Оскільки Карма не знав про цей проксі, він постійно констатував помилки в консолі, що кінцеву точку API не вдалося знайти. Отож, переглянувши документацію про Карму, я виявив, що я можу зробити те, щоб додати властивість "проксі" в karma.conf.js з тим самим об'єктом із proxy.conf.json:

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

Помилка в консолі зникла, і [об’єкт errorEvent] більше не кидався.

Зрештою, що для мене може працювати:

    TestBed.resetTestingModule();
  })