es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Llame a una función interna en un componente de React

27 Jul, 2023 Programación

Este componente implementa Google reCAPTCHA. Esta no es la implementación completa, pero es similar.
Estoy intentando probar si se ha llamado a una función de devolución de llamada onSuccess.

function ReCaptcha() {
  function onSuccess() {
    console.log("somos exitosos");
  }
  useEffect(() => {
    window.grecaptcha = {
      enterprise: {},
    };
    window.grecaptcha.enterprise = {
      execute: function (onSuccess) {
        // esta parte se hace con Google y llama a onSuccess como devolución de llamada
      },
    };
    window.grecaptcha.enterprise.execute().then(() => {
      onSuccess();
    });
  }, []);
  return <h1>ReCaptcha</h1>;
}

export default ReCaptcha;

He intentado llamar a esta función basándome en este artículo, pero no han funcionado.

Idealmente, me gustaría simular onSuccess y verificar si ha sido llamado.

onSuccess = jest.fn()
expect(onSuccess).toHaveBeenCalled();

Espero que esto sea de ayuda.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para probar si la función de devolución de llamada onSuccess ha sido llamada en este componente que implementa Google reCAPTCHA, puedes utilizar el método jest.fn() para crear una función simulada para onSuccess, y luego utilizar el matcher toHaveBeenCalled() para comprobar si ha sido llamada durante la prueba. Aquí tienes un ejemplo de caso de prueba utilizando Jest y React Testing Library:

    import { render } from '@testing-library/react';
import ReCaptcha from './ReCaptcha';

describe('ReCaptcha', () => {
  it('debería llamar a la función de devolución de llamada onSuccess', () => {
    const onSuccess = jest.fn();
    window.grecaptcha = {
      enterprise: {
        execute: jest.fn().mockResolvedValue(Promise.resolve()),
      },
    };

    render(<recaptcha onsuccess="{onSuccess}"></recaptcha>);

    expect(onSuccess).toHaveBeenCalled();
  });
});

    En este caso de prueba, creamos una función simulada onSuccess utilizando jest.fn(), y luego simulamos la ejecución del método execute() de grecaptcha.enterprise utilizando una función simulada que devuelve una promesa resuelta.

    Luego, renderizamos el componente ReCaptcha con la función simulada onSuccess pasada como una propiedad. Finalmente, probamos si la función onSuccess ha sido llamada utilizando el matcher toHaveBeenCalled().

    Ten en cuenta que este ejemplo asume que window.grecaptcha.enterprise está simulado correctamente antes de que se renderice el componente. En un escenario de mundo real, es posible que necesites configurar esta simulación antes de cada caso de prueba.

Comments are closed.