使用MatMenuHarness单元测试Angular Material Menu失败问题求解

排查&修正方案 #

你将id绑定到菜单触发按钮的操作是正确的，MatMenuHarness默认就是关联到触发器元素，无需调整id位置，按以下几个点排查遗漏配置即可：

• 首先确认测试模块的imports数组中正确导入了NoopAnimationsModule（测试环境推荐用该模块跳过Material组件动画，减少异步等待的不可控问题），如果不用跳过动画也至少要导入BrowserAnimationsModule。Angular Material的交互组件强依赖动画模块，缺失会导致菜单打开等操作无响应。另外你提到的MatMenuModule、MatButtonModule都需要放在测试模块的imports数组，不是exports数组。
• 如果你用了fa-icon组件，测试环境未导入对应FontAwesome模块的话，需要先Mock该组件，避免模板解析失败导致触发按钮未正常渲染：

@Component({selector: 'fa-icon', template: ''})
class MockFaIconComponent {
  @Input() icon: any;
}

然后在测试模块的declarations数组中加入MockFaIconComponent。

• 确认HarnessLoader初始化正确，需要在组件fixture创建后初始化根加载器：

let loader: HarnessLoader;

beforeEach(() => {
  fixture = TestBed.createComponent(你的组件类名);
  loader = TestbedHarnessEnvironment.loader(fixture);
  fixture.detectChanges();
});

• 调用菜单打开操作后，不要只调用fixture.detectChanges()，还需要等待异步状态稳定，补充await fixture.whenStable()再执行断言。

修正后的测试用例参考

it('should test the main menu', async () => {
  const menu = await loader.getHarness(MatMenuHarness.with({selector: '#mainMenu'}));
  await menu.open();
  fixture.detectChanges();
  await fixture.whenStable(); // 等待菜单打开的异步操作完成
  
  expect(await menu.isOpen()).toBe(true);
  const items = await menu.getItems();
  expect(items.length).toBe(2);
});

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