如何使用 NextJS API 在 Jest 单元测试中考虑 Google reCaptcha

Posted 2023-02-22

【中文标题】如何使用 NextJS API 在 Jest 单元测试中考虑 Google reCaptcha

【英文标题】：How to Account for Google reCaptcha in Jest Unit Test with NextJS API

【发布时间】：2021-10-31 04:15:34

【问题描述】：

我已经使用 NextJS 设置了一个简单的 API 端点，并希望能够为它实现一些单元测试。

端点使用 Google recaptcha 来保护网站（和网站所有者的电子邮件）免受机器人垃圾邮件的侵害。

端点似乎按预期工作，但我觉得我用来对它进行单元测试的方法有点笨拙。

我的解决方案的基本要点是简单地检查 NODE_ENV 是否设置为测试并返回一个通用的成功 JSON：

  if (process.env.NODE_ENV === "test")
    return 
      success: true,
      challenge_ts: new Date().getTime(),
      error_codes: [],
      hostname: "localhost",
    ;

如果可能的话，我宁愿不在端点模块文件中使用此代码发布应用程序，因为它不适合我。

问题在于，删除此代码显然意味着我的测试全部失败，因为由于缺少来自 Google ReCaptcha API 的响应令牌，它们将返回 422 状态。

我正在使用 react-google-recaptcha NPM 包来实现 ReCaptcha，并设置了我的 jest 配置以在运行测试时使用 .env.test 文件。

这让我可以使用来自 Google 的 docs 的建议密钥，而无需更改我的配置等。

我面临的问题是无法从 ReCaptcha 的前端实现获取响应令牌，然后传递到 NextJS API 端点。

我尝试使用 render 和 createRef 模仿我的实际前端实现，但在 Jest 中无济于事。

有人对我目前实施的解决方案有更好的解决方案吗？

提前致谢。

爱。

【参考方案1】：

我在我们的代码库中添加了这个笑话来模拟 react-google-recaptcha 库的行为。

jest.mock('react-google-recaptcha', () => 
  const React = require('react');
  const RecaptchaV2 = React.forwardRef((props, ref) => 
    React.useImperativeHandle(ref, () => (
      reset: jest.fn(),
      execute: () => 
        props.onChange('test-v2-token');
      
    ));
    return <input ref=ref data-testid="mock-v2-captcha-element" ...props />
  );

  return RecaptchaV2;
);

这将模拟库中的重置和执行功能。执行函数将始终通过 test-v2-token 代替 v2 验证码。

【参考方案2】：

除了@Saurabh's 答案之外，请确保将此代码 sn-p 放入jest.setup.js 文件中。 我也稍微改变了实现：

jest.mock('react-google-recaptcha', () => 
  const RecaptchaV2 = React.forwardRef((props, ref) => 
    React.useImperativeHandle(ref, () => (
      reset: jest.fn(),
      execute: jest.fn(),
      executeAsync: jest.fn(() => 'token'),
    ));
    return <input ref=ref type="checkbox" data-testid="mock-v2-captcha-element" ...props />;
  );

  return RecaptchaV2;
);