Làm cách nào để gỡ lỗi "[object ErrorEvent] được ném ra" trong các bài kiểm tra Karma / Jasmine của tôi?

Tôi có một số bài kiểm tra thất bại mà chỉ xuất ra [object ErrorEvent] thrown. Tôi không thấy bất kỳ thứ gì trong bảng điều khiển giúp tôi xác định mã vi phạm. Có điều gì tôi cần làm để theo dõi những thứ này không?

[EDIT]: Tôi đang chạy Karma v1.70, Jasmine v2.7.0

FYI: bạn có thể tìm thấy lỗi chính xác chỉ bằng cách mở Bảng điều khiển DevTools khi các thử nghiệm của bạn đang chạy.

Là một bản sửa lỗi nhanh, bạn có thể thử chạy các thử nghiệm của mình mà không cần sơ đồ nguồn :

CLI v6.0.8 trở lên
--source-map=false

Phiên bản đầu tiên CLI v6.0.x
--sourceMap=false

CLI v1.x
--sourcemaps=false

Phím tắt ng test -sm=falsecũng có thể hoạt động

Có một vấn đề mở trên https://github.com/angular/angular-cli/issues/7296

CẬP NHẬT : Tôi cũng gặp sự cố đó, vì vậy tôi vừa chuyển sang cli mới nhất và đảm bảo rằng tất cả các gói được cập nhật package.jsoncũng như tôi đã cài đặt lại đầy đủ node_modulesnên hiện tại vấn đề đã biến mất.

Nếu sourcemap = false không giúp được gì, hãy thử 1) mở trình duyệt của bạn đang chạy thử nghiệm 2) nhấp vào nút gỡ lỗi 3) mở bảng điều khiển

Lỗi sẽ có

Hãy thử nếu bạn nhận được thông báo lỗi mô tả nhiều hơn bằng cách chạy kiểm tra từ thiết bị đầu cuối, như sau:

ng test -sm=false

Trong thử nghiệm của bạn, bạn có thể thay thế

it('should...')

với

fit('should...') 

Bây giờ chỉ có các bài kiểm tra trước sự phù hợp mới chạy. Để để trình duyệt mở sau khi chạy thử nghiệm, hãy chạy thử nghiệm như sau:

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

Cá nhân tôi đã gặp lỗi này hai lần. Cả hai chỉ được kích hoạt khi gọi fixture.detectChanges ().

Lần đầu tiên , tôi đã giải quyết nó bằng cách sử dụng nội suy chuỗi an toàn hơn trong tệp .html của tôi.

Ví dụ không an toàn :

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

Ví dụ Safe (r) (lưu ý dấu chấm hỏi):

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

Điều tương tự cũng có thể áp dụng cho ràng buộc tài sản:

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

Lần thứ hai , tôi đang sử dụng DatePipe trong tệp .html của mình, nhưng thuộc tính giả mà tôi sử dụng nó không phải là ngày tháng.

.html tệp:

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

Tệp .ts (mock-data) ( sai ):

let startDate = 'blablah';

Tệp .ts (mock-data) ( đúng ):

let startDate = '2018-01-26';

Điều này là do khung công tác jasmine không thể xử lý kiểu ErrorEvent vì vậy nó không trích xuất thông báo lỗi và các cuộc gọi error.toString()trên đối tượng đó.

Tôi vừa gửi một vấn đề tại jasmine repo https://github.com/jasmine/jasmine/issues/1594

Miễn là nó chưa được sửa, bạn có thể tạm thời vá gói jasmine đã cài đặt của mình trong thư mục node_modules. Trong trường hợp của tôi, nó là

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

và sau đó thay đổi việc triển khai ExceptionFormatter từ điều này

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

cái này

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

Nó giúp xác định vấn đề.

Đối với tôi, nó liên quan đến việc có một lời hứa được giải quyết trong ngOnInitthành phần. Tôi đã sử dụng async, fakeAsyncvà đánh dấu cũng như loại bỏ dần từng dịch vụ async vớispyOn

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

Angular - Cách đơn vị kiểm tra thành phần với cuộc gọi dịch vụ không đồng bộ

TL; DR: Nó có thể liên quan đến việc định tuyến thử nghiệm.

Tôi cũng nhận được [object ErrorEvent] thrown. Một giờ sau, truy tìm nó thành một dòng mã.

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

Vấn đề nằm ở môi trường thử nghiệm đang cố gắng đánh giá this.route.snapshot.paramMap.get('id').

Nếu tôi thay thế nó bằng 0, hãy [object ErrorEvent] thrownbiến mất.

UserService của tôi có một người dùng như vậy:

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

Vì vậy, 0chỉ có được người dùng này, tại chỉ mục 0.

Nếu không, khi bình thường chạy ứng dụng của tôi, this.route.snapshot.paramMap.get('id')được đánh giá khi người dùng chọn một người dùng để chỉnh sửa từ bảng người dùng của tôi.

Vì vậy, trong HTML của tôi, *ngFor="let user of users; index as i"các vòng lặp để hiển thị tất cả người dùng sau đó routerLink="/edit/{{i}}"để bạn có thể nhấp vào các nút chỉnh sửa cho mỗi người dùng, khi nhấp vào sẽ chuyển đến ví dụ: http://localhost:4200/edit/0để chỉnh sửa chi tiết của người dùng quản trị nói trên.

những gì về việc làm sạch sau mỗi trường hợp thử nghiệm:

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

Tôi đã từng gặp vấn đề tương tự. Một cách mà lỗi này xảy ra là khi bạn cố gắng truy cập bất kỳ thứ gì rỗng hoặc không xác định trong mẫu. Đảm bảo rằng bạn đã kiểm tra an toàn trên các biến đó.

Ví dụ, điều này sẽ ném [object: ErrorEvent] khi cấu hình không được xác định khi tải thành phần.

template.html

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

Làm điều này thay thế

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

Điều có thể giúp ích là, nếu bạn mở cửa sổ Chrome cho người chạy thử nghiệm Karma của mình, để mở các công cụ dành cho nhà phát triển và kiểm tra bảng điều khiển ở đó. Đối với tôi, điều này đã giúp tôi phát hiện ra rằng ứng dụng không thể sử dụng phương thức Array.findIndex trên một mảng không xác định (vì cấu trúc dữ liệu được tổ chức theo chuỗi ngày, chẳng hạn như dữ liệu [2018] [3] [28], và Tôi đã tình cờ chỉ đến ngày sai), nhưng thay vì chỉ dừng lại ở lỗi, bài kiểm tra vẫn tiếp tục chạy.

Đối với tôi, vấn đề là tôi đã có một bài kiểm tra mà tôi đã vô tình sử dụng thư viện auth0-lock .

Có vẻ như đây là sự cố không đồng bộ, vì sau khi tôi thêm đủ its vào một trong các thông số kỹ thuật thành phần của mình, tôi có thể nhận được thông báo lỗi có thể sử dụng được trỏ đến một tệp và dòng trong tệp đó (nó có liên quan đến paramMap.

Trong thông số kỹ thuật đã thử nghiệm ParamMap, tôi chỉ thêm:

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

Bạn có thể có một cuộc đua hoặc kiểm tra không đồng bộ không được thiết lập đúng cách hoặc được sử dụng không đúng cách. Tôi sẽ giả định rằng trường hợp gỡ lỗi cần được sửa và bỏ qua việc dòng lệnh đi qua. Chỉ cần tiếp tục làm mới trình chạy thử nghiệp nghiệp (trình duyệt) trong trường hợp lỗi [object ErrorEvent] thrownxuất hiện không liên tục, sau đó đảm bảo rằng bạn đã triển khai điều kiện không đồng bộ một cách chính xác.

Hy vọng rằng điều này hiệu quả.

[object ErrorEvent] được ném

Lỗi này cho thấy rằng bạn có một cái gì đó không xác định. Cách dễ nhất để gỡ lỗi nó từ kinh nghiệm của tôi là:

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

Trong trường hợp của tôi, vấn đề là với dịch vụ, vì một trong những đối tượng sẽ không được xác định trong quá trình chạy thử nghiệm.

Mẫu mã dịch vụ giống như bên dưới quyền truy cập vào dom,

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

Các thông số kỹ thuật đề cập đến dịch vụ này không thành công với lỗi ' [object ErrorEvent] được ném ra ".

Tôi đã chế nhạo đối tượng dịch vụ của mình bên trong tất cả các thông số kỹ thuật đề cập đến điều này và vấn đề đã được giải quyết.

Dịch vụ giả mạo

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

Và sử dụng đối tượng dịch vụ giả này trong các nhà cung cấp như bên dưới,

beforeEach(async(() => {

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

Tôi đang sử dụng proxy trong ứng dụng của mình được xác định trong proxy.conf.json như:

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

Bởi vì Karma không biết về proxy này, nó liên tục tạo ra các lỗi trong bảng điều khiển mà không thể tìm thấy điểm cuối API. Vì vậy, sau khi xem tài liệu Karma, tôi phát hiện ra rằng những gì tôi có thể làm là thêm thuộc tính "proxy" trong karma.conf.js với cùng một đối tượng từ proxy.conf.json:

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

Lỗi trong bảng điều khiển đã biến mất và [object errorEvent] không còn bị ném nữa.

Cuối cùng, những gì có thể làm việc cho tôi:

    TestBed.resetTestingModule();
  })