首先

我在使用Jest对Angular UI组件之一的primeNg进行单元测试时，想要使用Angular Material中的Harnesses。然而，primeNg中并没有相应的Harnesses，所以我找到了一个替代方案并与大家分享。

概括：

const debugEl = fixture.debugElement.query(By.directive(GrandchildComponent));
const grandchildComponentInstance: GrandchildComponent = debugEl.componentInstance;
GrandchildComponent.method();

目标组件

我将使用Jest来测试这个。
根据「开始」部分的说明，我将使用primeNg。
此外，我将使用独立组件进行测试。

HTML (Hypertext Markup Language)是一种用于创建网页的标记语言。

<div>
  <div>first = {{ first }}</div>
  <div>rows = {{ rows }}</div>
  <p-paginator
    (onPageChange)="onPageChange($event)"
    [first]="first"
    [rows]="rows"
    [totalRecords]="120"
  ></p-paginator>
</div>

TypeScript -> TypeScript是 TypeScript

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PaginatorModule, PaginatorState } from 'primeng/paginator';

@Component({
  selector: 'app-target',
  standalone: true,
  imports: [CommonModule, PaginatorModule],
  templateUrl: './target.component.html',
  styleUrls: ['./target.component.scss']
})
export class AppTargetComponent {
  first = 0;
  rows = 10;

  onPageChange(event: PaginatorState) {
    this.first = event.first ?? this.first;
  }
}

开玩笑

我们将测试当使用上述组件进行页面跳转时，当发出onPageChange时的行为。我们将使用test paginator进行确认。

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Paginator } from 'primeng/paginator';

import { AppTargetComponent } from './target.component';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [AppTargetComponent],
    });
    fixture = TestBed.createComponent(AppTargetComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('test paginator', () => {
    const debugEl = fixture.debugElement.query(By.directive(Paginator));
    const paginatorComponentInstance: Paginator = debugEl.componentInstance;
    paginatorComponentInstance.onPageChange.emit({
      page: 3,
      first: 30,
      rows: 10,
    });
    expect(component.first).toEqual(30);
  });
});

首先

fixture.debugElement.query(By.directive(Paginator));

请从目标组件的DOM中选择p-paginator。
p-paginator 在Paginator和文档中，所以要按原样指定。
但是，这是一个 DebugElement，所以要使用 debugEl.componentInstance 来获取该组件实例。
这样就可以实现类似Angular的ViewChild行为。

然后，我们从组件实例中调用想要调用的方法（在这里，我们希望测试分页时的行为，所以我们调用了OnPageChange被触发的方法）。

onPageChange(event: PaginatorState) {
  this.first = event.first ?? this.first;
}

由于对首值进行了更新，请使用 expect(component.first).toEqual(30) 来确认所需值是否存在，并完成操作。

结束

由於無法找到相關資料，因此我寫了下面的答案。將此作結。