Angular测试(Jasmine&Karma)中无法访问Nz-Option元素的解决方法

问题原因分析 #

1. 表单控件未初始化：模板中使用formControlName="basic"，但组件未对应初始化FormGroup和FormControl，导致nz-select无法正常渲染，进而影响nz-option的生成。
2. 下拉面板默认隐藏：Nz-Select的下拉面板默认处于隐藏状态，nz-option元素不会被渲染到DOM中，直接通过类选择器查询会返回空数组。

解决方案 #

1. 确保表单控件正确初始化

在组件类中添加表单初始化逻辑，保证formControlName绑定的控件存在：

import { FormBuilder, FormGroup } from '@angular/forms';

export class SubmissionDataComponent {
  submissionForm: FormGroup;
  example: any[] = [];

  constructor(private fb: FormBuilder) {
    this.submissionForm = this.fb.group({
      basic: ['']
    });
  }

  // ...其他组件逻辑
}

同时修改模板，补充表单组绑定：

<form [formGroup]="submissionForm">
  <nz-select nzShowSearch style="width: 100%" formControlName="basic" (ngModelChange)="basicChanged()">
    <nz-option class="nzOptions" *ngFor="let item of example" 
        [nzLabel]="item.productMarketingName"
        [nzValue]="item.productId">
    </nz-option>
  </nz-select>
</form>

2. 模拟展开下拉面板后查询元素

修改测试用例，先模拟点击nz-select展开下拉，再查询nz-option元素：

it('Should check if dropdown has data', () => {
  // 初始化表单（若组件未默认初始化）
  component.submissionForm = component.fb.group({ basic: [''] });
  
  // 设置测试数据，补全模板绑定的productId属性
  component.example = [
    { productMarketingName: 'test1', productId: 1 },
    { productMarketingName: 'test2', productId: 2 },
    { productMarketingName: 'test3', productId: 3 },
  ];
  
  fixture.detectChanges();

  // 模拟点击nz-select展开下拉面板
  const selectElement = fixture.debugElement.query(By.css('nz-select')).nativeElement;
  selectElement.click();
  
  fixture.detectChanges();

  // 查询nz-option元素
  const optionElements = fixture.debugElement.queryAll(By.css('.nzOptions'));
  
  // 断言选项数量符合预期
  expect(optionElements.length).toBeGreaterThan(0);
  expect(optionElements.length).toBe(3);
});

3. 验证NgZorro模块导入

确保自定义的NgZorroAntdModule中已导入必需的选择器模块：

// app/ng-zorro.module.ts
import { NgModule } from '@angular/core';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzOptionModule } from 'ng-zorro-antd/select';

@NgModule({
  exports: [
    NzSelectModule,
    NzOptionModule,
    // ...其他导出模块
  ]
})
export class NgZorroAntdModule { }

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