本文介绍了如何使用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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-22 11:49