如何在NextJS API的Jest单元测试中适配Google reCaptcha

以下三种方案均不会侵入生产代码，完全可以替代你当前硬编码环境判断的实现：

• 方案1：Mock业务层的reCaptcha验证逻辑（适合单独测API端点）
  你可以把API中调用Google reCaptcha服务验证token的逻辑抽成独立函数，比如命名为verifyRecaptcha，在测试文件中直接Mock这个函数的返回值即可，不需要修改任何生产代码：
  示例代码：

  // 测试文件中
  import { verifyRecaptcha } from '@/utils/recaptcha'
  jest.mock('@/utils/recaptcha')
  
  test('接口正常返回数据', async () => {
    // 让验证函数固定返回成功
    verifyRecaptcha.mockResolvedValue({
      success: true,
      challenge_ts: new Date().getTime(),
      error_codes: [],
      hostname: "localhost",
    })
    // 后续正常调用接口测试即可
  })
  

  这种方式完全不会侵入生产代码，也不需要真实发起网络请求到Google服务，测试速度更快。
• 方案2：Mock前端react-google-recaptcha组件（适合测前端+API的集成流）
  你已经配置了测试环境使用Google官方的测试密钥，只需要在Jest全局配置中Mock这个第三方组件，让它固定返回测试用token即可：
  在jest.setup.js中添加如下配置：

  jest.mock('react-google-recaptcha', () => {
    const MockRecaptcha = jest.fn((props) => {
      // 组件加载后自动触发onChange回调传入测试token
      props.onChange?.('test_recaptcha_token')
      return <div data-testid="mock-recaptcha" />
    })
    // 模拟ref调用的方法
    MockRecaptcha.prototype.getValue = jest.fn(() => 'test_recaptcha_token')
    MockRecaptcha.prototype.reset = jest.fn()
    MockRecaptcha.prototype.execute = jest.fn()
    return MockRecaptcha
  })
  

  配置完成后，前端测试中渲染ReCaptcha组件时会自动生成可用的测试token，提交到API后配合测试密钥可以直接通过验证。
• 方案3：直接传入测试token（无需Mock，适合真实接口测试）
  Google官方提供的测试密钥本身支持任意非空字符串作为有效token，你在测试API时直接在请求参数中携带任意非空的reCaptcha token字段即可，不需要修改任何业务逻辑，也不需要Mock。

你原先硬编码判断NODE_ENV的实现风险很高，一旦逻辑判断出错会导致生产环境的reCaptcha校验完全失效，同时测试逻辑耦合进生产代码也会增加代码冗余，以上方案都可以完全避免这个问题。

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