Angular测试中如何实例化mat-option值？解决forEach循环失效问题

原因分析 #

你的测试代码中直接给component.selectNombre.options赋值，但component.selectNombre本身未被实例化（值为undefined），导致无法设置options属性，最终函数里的forEach循环因this.selectNombre.options为undefined而无法执行。

解决方案 #

方式1：直接实例化selectNombre对象 #

在测试用例中先初始化component.selectNombre为一个包含options属性的对象，再赋值模拟的选项数组：

it('option nombre click', () => {
    component.allNombreSelected = false;
    // 先实例化selectNombre对象
    component.selectNombre = {
        options: optionSelect
    };
    component.optionNombreClick();

    expect(component.allNombreSelected).toEqual(false);
});

方式2：模拟MatOption实例（更贴近真实场景） #

如果需要严格匹配MatOption的类型，可以用jasmine.createSpyObj生成模拟实例，确保每个选项都符合MatOption的结构：

// 在测试描述块内定义模拟的MatOption数组
const mockMatOptions = [
    jasmine.createSpyObj('MatOption', [], { selected: true }),
    jasmine.createSpyObj('MatOption', [], { selected: false })
];

it('option nombre click', () => {
    component.allNombreSelected = false;
    component.selectNombre = {
        options: mockMatOptions
    };
    component.optionNombreClick();

    expect(component.allNombreSelected).toEqual(false);
});

额外说明 #

• 你的optionSelect数组中的对象已经包含selected属性，满足函数的需求，所以方式1可以直接使用。
• 如果后续函数需要调用MatOption的其他方法（比如select()、deselect()），方式2的模拟方式会更合适，因为可以给spy对象添加对应的方法。

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