ฉันจะแก้ไขข้อผิดพลาด“ [object ErrorEvent] โยน” ในการทดสอบ Karma / Jasmine ได้อย่างไร

[object ErrorEvent] thrownฉันมีการทดสอบล้มเหลวหลายอย่างที่ส่งออกเท่านั้น ฉันไม่เห็นอะไรเลยในคอนโซลที่ช่วยระบุรหัสที่กระทำผิด มีสิ่งที่ฉันต้องทำเพื่อติดตามสิ่งเหล่านี้หรือไม่?

[แก้ไข]: ฉันใช้ Karma v1.70, Jasmine v2.7.0

FYI: คุณสามารถค้นหาข้อผิดพลาดที่เกิดขึ้นได้เพียงแค่เปิดDevTools Consoleเมื่อการทดสอบของคุณทำงาน

ในฐานะ Quickfix คุณสามารถลองเรียกใช้การทดสอบของคุณโดยไม่ต้องใช้ Sourcemaps :

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/issues/7296

อัปเดต : ฉันมีปัญหานั้นเช่นกันดังนั้นฉันจึงย้ายไปที่ cli ล่าสุดและตรวจสอบให้แน่ใจว่าแพ็คเกจทั้งหมดได้รับการอัปเดตแล้วpackage.jsonฉันได้ติดตั้งใหม่ทั้งหมดด้วยnode_modulesดังนั้นตอนนี้ปัญหาจึงหายไป

หาก sourcemap = false ไม่ช่วยให้ลอง 1) เปิดเบราว์เซอร์ของคุณที่เรียกใช้การทดสอบ 2) คลิกปุ่ม debug 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()ใช้วัตถุนั้นแทน

ฉันเพิ่งยื่นเรื่องที่มะลิ repo https://github.com/jasmine/jasmine/issues/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และติ๊กเช่นเดียวกับ stubbing ออกบริการ async ด้วย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ออกไป

UserService ของฉันมีผู้ใช้ดังนี้:

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

ดังนั้นเพียงแค่ได้รับผู้ใช้นี้ที่ดัชนี00

มิฉะนั้นเมื่อใช้งานแอปตามปกติ 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 บนอาร์เรย์ที่ไม่ได้กำหนด (เนื่องจากโครงสร้างข้อมูลจัดเรียงตามสตริงวันที่เช่น data [2018] [3] [28] และ ฉันบังเอิญชี้ไปที่วันที่ผิด) แต่แทนที่จะหยุดเพียงแค่ข้อผิดพลาดการทดสอบยังคงดำเนินต่อไป

สำหรับผมปัญหาคือการที่ฉันมีการทดสอบที่ผมตั้งใจใช้auth0 ล็อคห้องสมุด

ดูเหมือนว่าจะเป็นปัญหา async เพราะหลังจากที่ฉันเพิ่ม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();
    });
  });

คุณอาจมีการแข่งขันหรือการทดสอบแบบ async ที่ตั้งค่าไม่ถูกต้องหรือใช้ไม่ถูกต้อง ฉันจะถือว่ากรณีการดีบักต้องได้รับการแก้ไขและไม่สนใจว่าบรรทัดคำสั่งนั้นผ่านไป เพียงแค่รีเฟรชตัวทดสอบกรรม (เบราว์เซอร์) ต่อไปในกรณีที่ข้อผิดพลาด[object ErrorEvent] thrownปรากฏขึ้นเป็นระยะ ๆ จากนั้นตรวจสอบให้แน่ใจว่าคุณได้ใช้เงื่อนไข async อย่างถูกต้อง

หวังว่าจะได้ผล

[object ErrorEvent] ถูกโยนทิ้ง

ข้อผิดพลาดนี้แสดงให้เห็นว่าคุณมีบางอย่างที่ไม่ได้กำหนดไว้ วิธีที่ง่ายที่สุดในการดีบักจากประสบการณ์ของฉันคือ:

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

ในกรณีของฉันปัญหาเกิดขึ้นกับบริการเนื่องจากวัตถุชิ้นใดชิ้นหนึ่งจะไม่ถูกกำหนดในระหว่างการทดสอบที่ทำงานอยู่

ตัวอย่างรหัสบริการคือการเข้าถึง Dom ด้านล่าง

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

ข้อกำหนดที่อ้างถึงบริการนี้ล้มเหลวด้วยข้อผิดพลาด " [object ErrorEvent] throw "

ฉันเยาะเย้ยวัตถุบริการของฉันภายในข้อกำหนดทั้งหมดที่อ้างถึงนี้และปัญหาได้รับการแก้ไขแล้ว

บริการเยาะเย้ย

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 }

เนื่องจาก Karma ไม่ทราบถึงพร็อกซีนี้จึงทำให้เกิดข้อผิดพลาดในคอนโซลที่ไม่พบจุดสิ้นสุด API ดังนั้นหลังจากดูในเอกสาร Karma ฉันพบว่าสิ่งที่ฉันทำได้คือเพิ่มคุณสมบัติ "proxies" ในarma.conf.jsด้วยวัตถุเดียวกันจาก proxy.conf.json:

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

ข้อผิดพลาดในคอนโซลหายไปและ [object errorEvent] ไม่ถูกส่งอีกต่อไป

ในท้ายที่สุดสิ่งที่สามารถใช้ได้ผลสำหรับฉัน:

    TestBed.resetTestingModule();
  })