如何使用NextJS API在Jest单元测试中解释Google reCaptcha

问题描述

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

终结点使用Google reCAPTCHA保护网站(和网站所有者的电子邮件)免受BOT垃圾邮件。

终结点似乎正在按预期工作，但是我觉得我用来对其进行单元测试的方法有点老套。

我的解决方案的基本要点是简单地检查NODE_ENV是否设置为测试，如果是，则返回通用的Success 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-recaptchanpm包来实现ReCaptcha，并已将我的jest配置设置为在运行测试时使用.env.test文件。

这允许我使用Google的docs中的建议密钥，而无需更改我的配置等。

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

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

有没有更好的解决方案来解决我目前已经实现的问题？

提前谢谢。

爱。

推荐答案

我已在代码库中添加了此JEST模拟以模拟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;
});

这将模拟库中的重置和执行函数。Execute函数将始终在v2验证码标记的位置传递test-v2-token。

这篇关于如何使用NextJS API在Jest单元测试中解释Google reCaptcha的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！