How to write tests for this hooks using Jest/RTL?

[wendelfreitas]

How can I write tests for this, I've tried mocking the hooks but nothing works, I'd like to start with a simple test flow:

-> Type on e-mail input ✅ -> Type on password input ✅ -> Click the Sign In button ✅ -> Wait for hook return isLoading:true 🚫

Another test example that I've tried -> Type on e-mail input ✅ -> Type on password input ✅ -> Click the Sign In button ✅ -> Wait for hook return authenticated user object 🚫

Thank you! ❤️

I have the following code:

import { Button } from '@suwilo/ui';
import { AuthError, EmailAuthProvider } from 'firebase/auth';
import { useSignInWithEmail } from '../../hooks/useSignInWithEmail';
import { Form, Formik, FormikHelpers } from 'formik';
import * as Yup from 'yup';
import { useTranslation } from 'react-i18next';
import { Input } from '../Input/Input';

type SignInFormProps = { email: string; password: string };

type CodeProps = {
  [name: string]: [string, string];
};

export const SignInForm = () => {
  const { mutate: login } = useSignInWithEmail();
  const { t } = useTranslation();

  const initialValues = {
    email: '',
    password: '',
  };

  const schema = Yup.object().shape({
    email: Yup.string()
      .email(t('@SignInForm.email-invalid'))
      .trim()
      .required(t('@SignInForm.email-required')),
    password: Yup.string().required(t('@SignInForm.password-required')).trim(),
  });

  const onSubmit = (
    values: SignInFormProps,
    actions: FormikHelpers<SignInFormProps>
  ) => {
    const credentials = EmailAuthProvider.credential(
      values.email,
      values.password
    );

    const onError = (error: AuthError) => {
      const codes: CodeProps = {
        'auth/user-not-found': ['email', t('firebase.auth/user-not-found')],
        'auth/wrong-password': ['password', t('firebase.auth/password-wrong')],
      };

      const args = codes[error.code];

      actions.setFieldError(...args);
    };

    login(credentials, {
      onError,
    });
  };

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={schema}
      onSubmit={onSubmit}
    >
      {() => (
        <Form className="mt-8 grid grid-cols-6 gap-6">
          <div className="col-span-6">
            <Input
              type="email"
              id="Email"
              name="email"
              required
              label={t('@SignInForm.email')}
              placeholder={t('@SignInForm.email')}
            />
          </div>

          <div className="col-span-6">
            <Input
              type="password"
              id="Password"
              required
              name="password"
              label={t('@SignInForm.password')}
              placeholder={t('@SignInForm.password')}
            />
          </div>

          <div className="col-span-6">
            <a className="text-sm text-primary-500 mx-1 hover:cursor-pointer hover:text-primary-700">
              {t('@SignInForm.forgot-password')}
            </a>
          </div>
          <div className="col-span-6">
            <Button className="w-full" type="submit">
              {t('@SignInForm.sign-in')}
            </Button>
          </div>

          <div className="col-span-6">
            <hr className="border-gray-100" />
          </div>
        </Form>
      )}
    </Formik>
  );
};