模仿不可见的Google Recaptca

Question

我正在使用库react google-recaptcha。

我的组件如下所示，在浏览器中运行良好：

const MyRecaptchaComponent = ({setRecaptchaToken}: {setRecaptchaToken: () => void}) => {
    const recaptchaRef = createRef<any>();
    function asyncScriptOnLoad() {
      recaptchaRef.current.executeAsync().then((value: any) => {
        setRecaptchaToken(value, 'score');
      });
    return (
    <>
      <ReCAPTCHA
        size="invisible"
        ref={recaptchaRef}
        sitekey="MyValidSiteKey"
        asyncScriptOnLoad={asyncScriptOnLoad}
        data-testid="invisible-mock-v2-captcha-element"
      />
    </>
  }
}

我尝试过像这个堆叠溢流柱一样模拟recaptcha组件，这对于复选框recaptcha很好，但是我如何处理不可见的recaptcha。

这是我的测试：

import CheckboxRecaptcha from '../CheckboxRecaptcha';
import ReCAPTCHA from 'react-google-recaptcha';

jest.mock('react-google-recaptcha', () => {
  const RecaptchaV2 = React.forwardRef<any, any>((props, ref) => {
    React.useImperativeHandle(ref, () => ({
      executeAsync: () => 'token',
    }));
    return (
      <input
        ref={ref}
        type="checkbox"
        onClick={() => {
          props.asyncScriptOnLoad();
        }}
        {...props}
      />
    );
  });

  return RecaptchaV2;
});

describe('test', () => {
  it('should', () => {
    const props = {
       setRecaptchaToken: jest.fn()
    };
    const component = render(<CheckboxRecaptcha {...props} />);
    fireEvent.click(screen.getByTestId('invisible-mock-v2-captcha-element'));
    expect(props.setRecaptchaToken).toHaveBeenCalled();
  });
});

我得到以下错误：

TypeError: recaptchaRef.current.executeAsync(...).then is not a function

我该怎么嘲笑裁判？

Answer 1

我想你必须把函数的实现当作一个承诺来嘲弄；

如您所知，异步代码必须返回承诺，并且返回了一个没有then和或catch方法的字符串。

尝试用下面的代码更改模拟

jest.mock('react-google-recaptcha', () => {
  const RecaptchaV2 = React.forwardRef<any, any>((props, ref) => {
    React.useImperativeHandle(ref, () => ({
      // Check this ----------v
      executeAsync: () => Promise.resolve('token')
    }));
    return (
      <input
        ref={ref}
        type="checkbox"
        onClick={() => {
          props.asyncScriptOnLoad();
        }}
        {...props}
      />
    );
  });

  return RecaptchaV2;
});