So basically I've a Login form with two input fields (password, email) and a react-google-recaptcha. My use case is simple. Test if the submit button is disabled if the input fields are empty and recaptcha is not verified. Enable it only when input fields contain data and recaptcha is verified.

Below is the code that I wrote and I know I did something wrong with recaptcha verification in test file.

I've gone through existing answers in Stack Overflow for example this but facing problem implementing the same.

Login.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;

Login.test.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();
})