Angular 6 Unit Tests: All\nReferenceError: 뒤에 오류가 발생했습니다.변수를 찾을 수 없음: $가 던져졌습니다.

Angular 6 Unit Tests: All\nReferenceError: 뒤에 오류가 발생했습니다.변수를 찾을 수 없음: $가 던져졌습니다.

단위 테스트를 실행할 때, 통과하더라도 실행 중인 모든 테스트가 끝날 때 다음 오류가 발생합니다.

팬텀을 실행하는 Jenkins CI 빌드에서JS:

.PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  {
    "message": "An error was thrown in afterAll\nReferenceError: Can't find variable: $ thrown",
    "str": "An error was thrown in afterAll\nReferenceError: Can't find variable: $ thrown"
  }

또는 Chrome에서:

Chrome 67.0.3396 (Windows 7 0.0.0) ERROR
  {
    "message": "An error was thrown in afterAll\n[object ErrorEvent] thrown",
    "str": "An error was thrown in afterAll\n[object ErrorEvent] thrown"
  }

저는 또한 정말로 신뢰할 수 없는 시험을 치렀습니다. 어떤 때는 그들이 성공할 수도 있고 어떤 때는 같은 시험이 실패할 수도 있습니다. 그래서 저는 이상한 일이 일어나고 있다는 것을 알았습니다.

제 문제는 제가 제 시험을 설정하는 아주 어리석은 방법 때문에 제 시험에 인종 문제가 있다는 것이었습니다. 하지만 저는 인터넷에서 제 문제에 대한 답을 찾느라 애를 썼기 때문에 어쨌든 여기서 그것을 기록하고 싶었습니다.

내가 어떻게든 한 것은 두 가지를 선언한 것입니다.beforeEach테스트를 설정하는 기능과 둘 중 하나가 비동기식이어서 경주 조건에서 가끔 순서가 떨어지거나 실패했습니다.

내 테스트 결과는 다음과 같습니다.

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomeComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

이 문제를 해결하기 위해 모든 설정을 각각의 설정 앞에 동기화된 하나로 설정했습니다.

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [HomeComponent]
    }).compileComponents();
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

이걸 알아내려고 너무 많은 시간을 낭비해서 다른 사람을 구하려고 여기에 두는 겁니다.

문제가 것 , Angular &로 이 저도한비문있데는제었가다슷이같니것습후모던이했호렇게로6▁v▁i.afterAll오류가 나타나기 시작했습니다(https://github.com/jasmine/jasmine/issues/1523) .나 자신에게 이 오류는 테스트에 실패하는 것이 아니라 제품군에 실패합니다.

이 문제에 대한 많은 답변을 살펴본 결과, 원인이 거의 항상 달라 온라인에서 도움을 찾기가 어려운 것 같습니다.패치 업데이트가 추가되어 더 나은 오류가 발생하기를 기대할 수 있습니다.

내 오류

[INFO] HeadlessChrome 71.0.3542 (Linux 0.0.0) DialogComponent #apply should save. FAILED
[INFO]  Uncaught TypeError: Cannot read property 'nativeElement' of undefined thrown
[INFO]       [31m✗ [39m[31mshould save.[39m
[INFO]  Uncaught TypeError: Cannot read property 'nativeElement' of undefined thrown
[INFO] 
[INFO] HeadlessChrome 71.0.3542 (Linux 0.0.0) DialogComponent #apply should save. FAILED
[INFO]  Uncaught TypeError: Cannot read property 'nativeElement' of undefined thrown
[INFO] HeadlessChrome 71.0.3542 (Linux 0.0.0) DialogComponent #apply should save. FAILED
[INFO]  Uncaught TypeError: Cannot read property 'nativeElement' of undefined thrown
[INFO] HeadlessChrome 71.0.3542 (Linux 0.0.0) ERROR
[INFO]   {
[INFO]     "message": "An error was thrown in afterAll\nUncaught TypeError: Cannot read property 'nativeElement' of undefined thrown\nUncaught TypeError: Cannot read property 'nativeElement' of undefined thrown",
[INFO]     "str": "An error was thrown in afterAll\nUncaught TypeError: Cannot read property 'nativeElement' of undefined thrown\nUncaught TypeError: Cannot read property 'nativeElement' of undefined thrown"
[INFO]   }

문제가 있는 테스트 찾기

이건 내가 할게.afterAll오류 메시지가 표시되고 무엇이 원인인지 또는 어떤 테스트가 원인인지 알 수 없습니다. 한 은 제가가먼한것것입다니는치설하를 입니다.karma-spec-reporter:npm install karma-spec-reporter --save-dev

합니다.karma.conf.js 파일:require('karma-spec-reporter')이것은 당신에게 스펙 리포터를 주고, 그리고 추가합니다.spec로: 기자배로열:▁the기▁array배:reporters: ['spec'],

다음에 테스트를 실행할 때 다음과 같이 표시됩니다.afterAll문제가 있는 테스트 후 콘솔에 오류가 표시됩니다.

내 문제/솔루션

나는 시험이 전화하는 것을 발견했습니다.htmlElement.click()했습니다.htmlElement.dispatchEvent(new Event('click))그리고 voila 테스트는 통과하기 시작했습니다.

요약

일반적으로 사용하지 않습니다..click()HT 엘리먼트는 지금.또한 사용자가 UI와 상호 작용할 때 이벤트를 통해 수행되므로 테스트 시 항상 좋은 점은 사용자의 동작을 보다 정확하게 모방하는 것입니다.

저에게도 도움이 되고 몇 가지 문제를 해결한 또 다른 것은 각 테스트 후 고정장치를 파괴하는 문구를 추가하는 것이었습니다.

  afterEach(() => {
    fixture.destroy();
  });

우리는 동일한 간헐적 오류와 간헐적 실패 테스트 모두에서 유사한 문제에 직면했습니다.이것은 Angular 6으로 업그레이드한 후 Jasmine 3으로 업그레이드했을 때 발생했습니다. Jasmine 3에서는 테스트를 랜덤 순서로 실행하는 것이 기본입니다.

아래의 @marsraits에서 지적했듯이, 이러한 변화가 이러한 오류의 원인이었다는 것은 우리의 테스트가 부적절하게 종속성을 공유하고 있었다는 것을 의미하며, 따라서 오류의 진정한 원인은 우리 자신의 코드에 있습니다.즉, 수많은 레거시 테스트를 다시 작성하는 대신 테스트 실행자를 위해 랜덤을 해제함으로써 문제를 신속하게 해결할 수 있었습니다.

karma.conf.js에 다음 설정을 추가하여 이 작업을 수행했습니다.

  config.set({
    client: {
      jasmine: {
        random: false
      }
    }
  })

이 오류가 발생하면 karma가 연 브라우저에서 오류를 확인하고 콘솔에서 오류를 확인합니다.

일반적으로 문제를 해결하는 데 도움이 되는 스택 추적이 있습니다.이것은 또한 유익하지 않은 업보에 의해 발생하는 다른 오류에도 적용됩니다.

오이신의 대답이 올바른 방향을 알려주었기 때문에 저는 오이신에게 매우 감사합니다.이 답변이 그의 답변을 보완하는 것이라고 생각해주시기 바랍니다.

그러나 IMHO에는 다음과 같은 두 가지 측면이 있습니다.

1. 우리는 인종 문제를 다루고 있지 않습니다.
   은 경주조다두가경의우미다니합를지음의의 두 합니다.beforeEach어느 것이 먼저 끝날지 결정할 수 없습니다. 실비, 비-비-비-비-비-비-비-비-사-비-비-----n-c---비-▁in-▁non---비-,-asy-실-▁the-,-사-▁reality---비beforeEach첫 번째로 실행되고 다음과 같이 실행됩니다.async한 사람이 2루를 달리다
   매번.
   개가 때.beforeEach그리고 그 중 하나는async 것을 하여)waitForAsync에서 제공하는 포장지@angular/core/testing), 인스턴스의 에 푸시됩니다.), 이 인스턴스는 실행 대기열의 끝에 푸시됩니다.

2. Oisin이 제안한 해결책도 찾아냈습니다.

[...] 모든 설정을 각 설정 앞에 동기화하여 하나로 만듭니다.

너무 제한적인동기식일 필요는 없습니다.문제 없이 비동기식일 수 있습니다.

중요한 것은TestBed.createComponent() 뒤를 쫓아야 합니다. TestBed.configureTestingModule()해결되었습니다.
그게 다야.

명확하게 하기 위해, 이 무작위 예는 다음과 같습니다.

import { TestBed, waitForAsync } from '@angular/core/testing';
// more imports...

describe('SomeComponent', () => {
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [SomeComponent],
      imports: [SharedModule, RouterTestingModule, HttpClientTestingModule],
      providers: [{
        provide: SomeService, useValue: {
          someObservableMethod$: () => of()
        } as Partial<SomeService>
      }]
    })
      .overrideModule(MatIconModule, MatIconModuleMock)
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  /* tests here */
});

다음으로 변환해야 합니다.

import { TestBed, waitForAsync } from '@angular/core/testing';
// more imports...

describe('SomeComponent', () => {
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [SomeComponent],
      imports: [SharedModule, RouterTestingModule, HttpClientTestingModule],
      providers: [{
        provide: SomeService, useValue: {
          someObservableMethod$: () => of()
        } as Partial<SomeService>
      }]
    })
      .overrideModule(MatIconModule, MatIconModuleMock)
      .compileComponents();

    fixture = TestBed.createComponent(SomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  /* tests here */
});

두 번째 코드(동기식)beforeEach첫 번째(연속)에 추가되었습니다.beforeEach.바로 그겁니다.

저는 방금 이 문제에 직면했습니다.나의 문제는 HttpClient와 관련이 있습니다.나는 오류 503을 반환하기 위해 httpClient를 조롱하고 있었고 구독에 오류 함수를 만들지 않았습니다.

  httpClient.get('/api').subscribe(() => {
      fail('Should not return success');
    }, (data) => {
      expect(data.status).toEqual(503); // without adding this callback here, you will get the error of this question
    });
    const request = mock.expectOne('/api');

    request.flush({data: 'test'}, { status: 503, statusText: 'Internal Error'});

이 오류에 대한 구체적인 문제는 테스트 중인 구성 요소의 하위 구성 요소를 조롱하지 않았기 때문에 발생했습니다.이 경우에는 두 개의 하위 구성 요소로 구성된 홈페이지 구성 요소가 있었는데, 하위 구성 요소에 대한 선언이 필요했지만 조롱하는 데는 실패했습니다.

결과적으로 하위 성분에는 이러한 명백하지 않은 방식으로 간헐적으로 검정이 실패하는 실제 종속성이 있습니다(다른 검정이 무작위로 실패하는 것처럼 보이지만 실제로는 그렇지 않습니다).

이 경우 다음과 같은 조롱이 상당히 효과적입니다.

@Component({
    selector: 'app-exercise',
    template: '<p>Mock Exercise Component</p>'
})
class MockExerciseComponent {
}

@Component({
    selector: 'app-user',
    template: '<p>Mock User Component</p>'
})
class MockUserComponent {
}

describe('HomepageComponent', () => {
    let component: HomepageComponent;
    let fixture: ComponentFixture<HomepageComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            // note you need to mock sub components!
            declarations: [HomepageComponent, MockExerciseComponent, MockUserComponent],

저도 비슷한 문제가 있었습니다.나의 각진 10 프로젝트에서.10번 중 8번은 오류가 발생한 후 실패합니다.spec.ts 파일에서 가져오기에는 HttpClientModule 대신 HttpClientTestingModule이 있어야 합니다.이거 먹어봐요.그것은 Afterall 이슈의 무작위 오류를 해결할 수도 있습니다.

저의 경우: 문제는 "캐치"의 부족인 것 같습니다.다음과 같은 작업 대신:

this.service.method().subscribe( r => { doSomething... } );

나는 해야 합니다.

this.service.method().subscribe( r => { doSomething... }, err => { doSomething... } );

저의 경우, 문제는 "캐치"의 부족인 것 같습니다.

다음과 같은 작업 대신:

this.service.getUsers().subscribe( r => { doSomething... } );

나는 해야 합니다.

this.service.getUsers().subscribe( r => { doSomething... }, err => { doSomething... }  );

저의 경우, 다음과 같은 시스템을 사용합니다.Angular 14 Linux

업그레이드 중puppeteer버전 2부터 18까지 이 문제를 해결했습니다.

내 경우에는

사용 중karma-parallel그리고 실행자 번호를 업데이트했을 때 작동했습니다(이유는 모르겠습니다).

 parallelOptions: {
      executors: 4, // Earlier it was 5 I have updated it to 4 and it worked
      shardStrategy: 'round-robin',
      ......
 }

한 가지 가능한 문제는 구성 요소 중 하나가 타사 스크립트를 실행하여 CORS 요청이 실패한다는 것입니다.(제 문제는 https://github.com/karma-runner/karma/issues/1268#issuecomment-70422477) 에 의해 해결되었습니다. 이로 인해 테스트가 Chrome에서 작동하는 것처럼 보이고 CI에서 간헐적으로 실패할 수 있습니다.

의심스러울 때는 Rui(https://stackoverflow.com/a/56662721/3370010) 의 조언을 따르고 모든 테스트가 통과하더라도 콘솔을 엽니다.

저의 경우 자스민을 사용하여 테스트한 기능에 오류를 던진 것이 문제였습니다.따라서 이 느려진 오류는 afterAll에 나타납니다.

this.userService.getUsers().subscribe(
  (data: User[]) => {
    if (data?.length === 0) {
      ...
    } else if (data?.length !== 0) {
      ...
    } else {
      throw new Error('Not valid response'); // This cause the error in afterAll if tested
    }
  }
);

저는 이 문제가 있었고 이 문제가 해결하는 데 도움이 되었습니다.제 경우에는 구독했습니다.it테스트 처리 비동기 코드를 사용하지 않습니다.여기 더 보기

넘겨주는 ▁it것▁soription▁around▁finding▁with는▁that포,.fakeAsync그 문제를 해결하는 데 도움이 되었습니다.

언급URL : https://stackoverflow.com/questions/51543241/angular-6-unit-tests-an-error-was-thrown-in-afterall-nreferenceerror-cant-fin