TypeScript - モデルを更新した後に *ngIf によって条件付けられたコンポーネントの DOM 要素に Angular ユニットテストでアクセスする

私は、テーブル行の選択（またはクリック）操作に設定された emit イベントのユニットテストケースを設定しており、必要なデータでコンポーネントも構成しています。ここでテーブルは別のコンポーネントであり、必要なデータを割り当てても、行要素に対して querySelect を対象とするためのテーブルの必要な DOM 要素（行要素）がレンダリングされません。ここにコードスニペットを追加します:

コンポーネント: タイプスクリプト

@Component({
   selector: 'app-user-list',
   templateUrl: './user-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
})

export class UserListComponent implements OnChanges {

   @Input() userSearchResult:UserSearchResult;
   @Output() navigateToUser: EventEmitter<UserInfo> = new EventEmitter();

   navigateToUserInfo(selectedUser: any) {
       this.navigateToUser.emit(selectedUser);
   }
}

コンポーネント: マークアップ

<div *ngIf="userSearchResult">
   <div class="vdl-row">
   <div class="vdl-col-md-12">
   <app-table [headers]="userSearchResult.columnNames"
              [dataset]="userSearchResult.userList"
              tableStyle="list" (tableRowClick) = "navigateToUserInfo($event)">
  </app-table>
 </div>
</div>

こちらが仕様ファイルのコードです:

import { ComponentFixture, async, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { TextboxComponent } from '@axyz/components/textbox';
import { UserListComponent } from './user-list.component';
import { UserSearchResult } from '../../../shared/models/user-search-result.model';
beforeEach(async( () => {
TestBed.configureTestingModule({
  imports: [],
  schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
  declarations: [UserListComponent],
  providers: [TextboxComponent]
  }).compileComponents();
}))
beforeEach(() => {
fixture = TestBed.overrideComponent(UserListComponent, {
  set: new Component({
    selector: 'app-user-list',
    templateUrl: './user-list.component.html',
    changeDetection: ChangeDetectionStrategy.Default
  })
}).createComponent(UserListComponent);
//fixture = TestBed.createComponent(UserListComponent);
component = fixture.componentInstance;
debugEle = fixture.debugElement;

it('should emit on click', fakeAsync(() => {
    debugger;
    let data;
    fixture.detectChanges();

    let spy = spyOn(component.navigateToUser, 'emit');
    console.log("1")

    console.log(debugEle.nativeElement);

    component.userSearchResult = userSearchResult; 
    fixture.detectChanges();
    // console.log("2")
    console.log(debugEle.nativeElement);

    debugEle.query(By.css('app- 
    table')).triggerEventHandler('click',selectedUser);

    component.navigateToUserInfo(selectedUser);
    expect(spy).toHaveBeenCalledWith(selectedUser);
  }));
 });

そして私が試すたびに、"overrideComponent" を使用するとコンソールにこのエラーが表示されます

キャッチされていないエラー: モジュール 'tslib' を見つけることができません at webpackEmptyContext (./node_modules/@angular/compiler/src_sync?:2) at eval (:9876/node_modules/@angular/compiler/src/core.js?:22) at eval (:9876/node_modules/@angular/compiler/src/core.js?:10) at eval (:9876/node_modules/@angular/compiler/src/core.js?:19) at Object../node_modules/@angular/compiler/src/core.js (vendor.js:46) at webpack_require (main.js:79) at eval (:9876/src/user-search/components/user-list/user-list.component.spec.ts?:7) at Object../src/user-search/components/user-list/user-list.component.spec.ts (main.js:231) at webpack_require (main.js:79) at webpackContext (./src_sync_.spec.ts$?:9)

私はすでにプロジェクトにtslibをインストールし、nodemodulesを削除してnpm installも行いました。私が正しくやっていないことはありますか？

回答 #1

EmployeeListComponentで何をしようとしているのか完全には分かりません。しかし、コードをこれに変更してみてください:

let fixture;
let component;
let debugEle;

beforeEach(async( () => {
  TestBed.configureTestingModule({
    imports: [],
    schemas: [NO_ERRORS_SCHEMA],
    declarations: [UserListComponent]
  })
    .overrideComponent(UserListComponent, { 
      set: { changeDetection: ChangeDetectionStrategy.Default}
    })
    .compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(UserListComponent);
  component = fixture.componentInstance;
  debugEle = fixture.debugElement;
});