Básicamente, tengo un formulario de inicio de sesión con dos campos de entrada (contraseña, correo electrónico) y un react-google-recaptcha. Mi caso de uso es simple. Pruebe si el botón Enviar está deshabilitado si los campos de entrada están vacíos y no se verifica recaptcha. Habilítelo solo cuando los campos de entrada contengan datos y se verifique recaptcha.

A continuación se muestra el código que escribí y sé que hice algo mal con la verificación de recaptcha en el archivo de prueba.

He revisado las respuestas existentes en Stack Overflow, por ejemplo, pero tengo problemas para implementar lo mismo.

Inicio de sesión.tsx

 import React, { useState } from "react"; import ReCAPTCHA from "react-google-recaptcha"; const Login = () => { const [creds, setCreds] = useState({ email: "", pw: "", }); const [isCaptchaVerified, setIsCaptchaVerified] = useState(false); const handleCaptchaChange = (value): void => { if (value !== null) setIsCaptchaVerified(true); else setIsCaptchaVerified(false); }; return ( <div> <input data-testid="email-testid" type="email" name="email" value={creds.email} onChange={(e) => { setCreds({ email: e.target.value, pw: creds.pw, }); }} /> <input data-testid="pw-testid" type="password" name="password" value={creds.pw} onChange={(e) => { setCreds({ pw: e.target.value, email: creds.email, }); }} /> <ReCAPTCHA data-testid="login-recaptcha" sitekey={siteKey} onChange={handleCaptchaChange} /> <button data-testid="submit-testid" disabled={!isCaptchaVerified || !creds.pw || !creds.email}> Submit </button> </div> ); }; export default Login;

Inicio de sesión.prueba.tsx

 test("test if button is disabled untill captcha is verified",()=> { const loginRecaptcha = screen.findByTestId('login-recaptcha'); const emailField = screen.findByTestId('email-testid'); const pwField = screen.findByTestId('pw-testid'); const submitButton = screen.findByTestId('submit-testid'); expect(submitButton).toBeDisabled(); fireEvent.change(emailField, { target: { value: "user@test.com" } }); fireEvent.change(pwField, { target: { value: "user@1234" } }); fireEvent.click(loginRecaptcha); expect(submitButton).not.toBeDisabled(); })