Angular单元测试：如何在函数中传入FormGroupDirective参数？

云原生阿岚

2026-7-27

解决方案

你需要传入一个模拟的FormGroupDirective实例，而非null。真实的FormGroupDirective是Angular表单模块提供的指令，单元测试中无需创建真实实例，只需模拟它的resetForm方法即可。

具体修改步骤：

在测试文件顶部导入FormGroupDirective：

import { FormGroupDirective } from '@angular/forms';

在测试用例中创建模拟对象，利用测试框架的spy工具模拟resetForm方法：

it('should save the trailer log form', () => {
    const response: { message: string } = { message: '' };
    // 创建模拟的FormGroupDirective，仅实现我们需要的resetForm方法
    const mockFormDirective = jasmine.createSpyObj('FormGroupDirective', ['resetForm']);
    // 建议同时mock掉notification服务，避免未处理的依赖报错
    spyOn(component['_notification'], 'show');
    spyOn(_httpService, 'save').and.returnValue(of(response));
    
    // 传入模拟对象替代null
    component.onSave(mockFormDirective);
    fixture.detectChanges();

    expect(component.trailerHeading).toEqual('Trailer');
    expect(component.showAllTrailers).toBeFalsy();
    expect(component.trailerList.length).toEqual(0);
    // 可选：验证resetForm方法是否被正确调用
    expect(mockFormDirective.resetForm).toHaveBeenCalled();
});