测试Angular Material的MatPaginator时出现pageIndex未定义错误

你遇到的这个问题是测试环境里的典型问题——组件中的paginatorVacancies实例还没被正确初始化，就直接去访问它的pageIndex属性，自然会抛出TypeError。下面给你几个实用的解决思路：

方法1：手动初始化真实的MatPaginator实例 #

如果你的测试需要用到分页器的真实行为，可以在测试初始化阶段手动创建实例并赋值给组件：

import { MatPaginator } from '@angular/material/paginator';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your.component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let paginator: MatPaginator;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      imports: [MatPaginatorModule] // 务必导入MatPaginator模块
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    
    // 从TestBed获取分页器实例，赋值给组件属性
    paginator = TestBed.inject(MatPaginator);
    component.paginatorVacancies = paginator;
    
    fixture.detectChanges(); // 触发变更检测，确保实例绑定生效
  });

  it('should reset vacancy search correctly', () => {
    spyOn(component, 'getVacanciesList');
    component.resetVacancySearch();
    
    expect(component.isVacanciesSearchMode).toBeFalse();
    expect(component.searchVacanciesValue).toBe('');
    expect(component.paginatorVacancies.pageIndex).toBe(0);
    expect(component.paginatorVacancies.pageSize).toBe(10);
    expect(component.getVacanciesList).toHaveBeenCalledWith(0, 10, 'name', 'ASC');
  });
});

方法2：确保@ViewChild正确获取实例（如果组件用了ViewChild） #

如果你的组件是通过@ViewChild('paginatorVacancies') paginatorVacancies: MatPaginator;绑定分页器的，测试时要确保视图完成初始化，让ViewChild能拿到目标元素：

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [YourComponent],
    imports: [MatPaginatorModule]
  }).compileComponents();

  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  
  // 第一次detectChanges会触发视图初始化，完成ViewChild绑定
  fixture.detectChanges();
  await fixture.whenStable(); // 如果涉及异步加载，加这个确保视图稳定
  
  // 此时component.paginatorVacancies已经被正确赋值
});

方法3：用Mock对象简化测试（无需真实分页器） #

如果你的测试只关心组件的业务逻辑，不需要验证分页器的内部行为，可以直接创建一个Mock对象赋值给组件：

beforeEach(() => {
  // ...其他初始化步骤
  // 创建符合MatPaginator接口的Mock对象，按需添加属性
  component.paginatorVacancies = {
    pageIndex: 0,
    pageSize: 10
    // 若测试中需要用到其他方法/属性，可在此补充
  } as MatPaginator;
});

额外检查点 #

别忘了确认组件模板里的分页器元素是否正确设置了模板引用变量：

<mat-paginator #paginatorVacancies [pageSizeOptions]="[10, 20, 50]"></mat-paginator>

模板中的#paginatorVacancies必须和组件中@ViewChild的参数完全一致，否则ViewChild无法找到对应的元素。

内容的提问来源于stack exchange，提问作者decebal