invertase / invertase/tanstack-query-firebase

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

Open
#75 0 comments 0 reactions 0 assignees View on GitHub
react-query-firebase
Dominant language
TypeScript
Stars
462
Forks
69
PR merge metrics
No merged PRs in 30d

Description

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:

```js
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
) => {
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 (

{() => (







{t('@SignInForm.forgot-password')}




{t('@SignInForm.sign-in')}






)}

);
};

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.