Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#75 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
25/100
Tipo di issue
Documentazione
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
firebase, react, typescript
Ambito
authentication, frontend, testing

Direzione di ricerca

Parti dal componente SignInForm mostrato e dal relativo hook useSignInWithEmail, quindi esamina come sono configurati Jest e React Testing Library nel progetto. Il risultato richiesto è una guida o dei test che coprano l’inserimento dell’e-mail e della password, l’invio di Sign In, l’osservazione di isLoading e la ricezione di un utente autenticato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

react-query-firebase

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>
  );
};
Lingua principale
TypeScript
Stelle
462
Fork
70
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di invertase/tanstack-query-firebase

Tutte le issue di invertase/tanstack-query-firebase

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.