如何测试Angular Material表格单元格内元素？修复Jest测试失败

问题背景 #

两个Jest单元测试用于验证指定元素数量：

• test1：验证表格外data-test="q1"元素数量为3，执行成功
• test2：验证Angular Material表格内<td mat-cell>中的data-test="q2"元素数量为3，执行失败

测试代码 #

it('test1', () => {
  const elements = fixture.debugElement.queryAll(By.css('[data-test="q1"]'));
  const elementsLength = elements.length;
  expect(elementsLength).toBe(3);
});

it('test2', () => {
  const elements = fixture.debugElement.queryAll(By.css('[data-test="q2"]'));
  const elementsLength = elements.length;
  expect(elementsLength).toBe(3);
});

Angular模板代码 #

<div data-test="q1">q1</div>
<div data-test="q1">q1</div>
<div data-test="q1">q1</div>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element">

    <div data-test="q2">q2</div>
    <div data-test="q2">q2</div>
    <div data-test="q2">q2</div>

    {{element.position}}
   </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>   

失败原因 #

Angular Material表格的dataSource未在测试中初始化，导致*matRowDef没有渲染任何数据行，<td mat-cell>及其内部的q2元素完全不会出现在DOM中，因此queryAll返回的元素长度为0，与预期的3不符。

修复方案 #

在test2测试中，先初始化表格的dataSource并触发变更检测，确保数据行渲染：

it('test2', () => {
  // 初始化表格数据源，至少提供一行数据
  component.dataSource = new MatTableDataSource([{ position: 1 }]);
  // 触发变更检测，让表格渲染数据行
  fixture.detectChanges();

  const elements = fixture.debugElement.queryAll(By.css('[data-test="q2"]'));
  const elementsLength = elements.length;
  expect(elementsLength).toBe(3);
});

同时需要确保测试文件中导入MatTableDataSource：

import { MatTableDataSource } from '@angular/material/table';

这样表格会渲染出一行数据，<td mat-cell>内的3个q2元素会被加载到DOM中，测试即可通过。

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