Angular单元测试ngx-recaptcha2报reCaptchaApi.render不是函数错误

错误原因 #

这个报错是因为单元测试运行环境没有加载Google reCAPTCHA的外部脚本，ngx-recaptcha2组件依赖的全局grecaptcha对象不存在，导致内部调用reCaptchaApi.render方法失败。你的测试目标是验证表单输入框的属性，不需要依赖真实的验证码功能，直接mock相关依赖即可解决问题。

解决方案1：Mock ngx-recaptcha2组件（推荐） #

直接模拟验证码组件，不需要引入真实的NgxCaptchaModule，避免第三方依赖影响业务逻辑测试：

1. 在你的spec测试文件顶部定义mock组件：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'ngx-recaptcha2',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: MockNgxRecaptcha2Component,
      multi: true
    }
  ],
  template: ''
})
class MockNgxRecaptcha2Component implements ControlValueAccessor {
  @Input() siteKey: string;
  @Input() useGlobalDomain: boolean;
  @Input() size: string;
  @Output() success = new EventEmitter<any>();

  writeValue(obj: any): void {}
  registerOnChange(fn: any): void {}
  registerOnTouched(fn: any): void {}
  setDisabledState?(isDisabled: boolean): void {}
}

2. 修改TestBed配置：移除NgxCaptchaModule导入，把mock组件加入declarations：

TestBed.configureTestingModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
    RouterTestingModule,
    HttpClientTestingModule
    // 删掉原来的NgxCaptchaModule
  ],
  declarations: [RegistrationComponent, MockNgxRecaptcha2Component], // 加入mock组件
  providers: [
    AuthService,
    SharedService,
    CookieService,
    SpinnerVisibilityService,
  ],
})

解决方案2：Mock全局grecaptcha对象 #

如果你不想模拟组件，也可以直接在测试环境给window挂载全局的grecaptcha mock对象：
在测试文件的第一个beforeEach块最前面加入以下代码：

beforeEach(async(() => {
  // 新增mock全局验证码API
  (window as any).grecaptcha = {
    render: () => 1, // 随便返回一个数字作为验证码组件id
    execute: () => {},
    reset: () => {}
  };

  TestBed.configureTestingModule({
    // 原来的配置保持不变
  }).compileComponents();
}));

两种方案都可以解决你的报错问题，第一种方案单元测试隔离性更好，不会引入第三方组件的内部逻辑影响测试结果。

内容的提问来源于stack exchange，提问作者SAI PAVAN KUMAR