Angular单元测试中点击mat-select后panelOpen始终为false是什么原因

核心原因有两点： #

1. MatSelect的下拉面板不属于mat-select的DOM子树
   Angular Material的mat-select下拉选项是通过全局Overlay渲染的，默认直接挂载在<body>节点下，你查询select.children拿到的永远是mat-select内部预渲染的关闭状态选项内容，自然只能拿到value，并不是panelOpen没有更新，是你根本没有获取到面板打开后实际渲染的选项节点。

2. 原生DOM点击的触发可靠性与时序问题
   测试环境下直接调用原生元素的click()方法，有可能没有被MatSelect的事件绑定正确捕获，尤其是你没有导入NoopAnimationsModule禁用动画时，下拉打开的动画逻辑会导致panelOpen状态异步延迟更新，你调用fixture.whenStable()时状态还未完成修改。

修正后的测试写法 #

建议直接操作MatSelect组件实例而非原生DOM，同时调整选项查询逻辑，可靠性更高：

import { MatSelect } from '@angular/material/select';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

// 测试模块导入时加上NoopAnimationsModule禁用动画，避免异步时序问题
TestBed.configureTestingModule({
  imports: [/* 其他依赖 */, NoopAnimationsModule],
  // ...其他配置
})

it('should populate options list with view values when panel is open', async () => {
  const expected = optionsData.map(o => o.viewValue);
  // 直接获取MatSelect组件实例，而非原生DOM元素
  const selectComponent = de.query(By.directive(MatSelect)).componentInstance as MatSelect;

  // 调用组件自带的open方法，比原生点击更可靠
  selectComponent.open();
  fixture.detectChanges();
  
  await fixture.whenStable();
  // 可先验证panelOpen状态确实已更新
  expect(selectComponent.panelOpen).toBeTrue();

  // 全局查询所有渲染完成的mat-option元素
  const optionElements = de.queryAll(By.css('.mat-option'));
  optionElements.forEach((optionDe, index) => {
    expect(optionDe.nativeElement.textContent.trim()).toBe(expected[index]);
  });
});

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