How to test Formik component using Jest?

42 Views Asked by At

I am using Formik and React Google Recaptcha on a form and I am trying to write a test in Jest to check that the form would not be sent if the fields were left empty.

This is a snippet of the entire code but it should give you an idea of how the page looks like:

import {Field, Form, Formik} from "formik";
import Recaptcha from "@/app/Recaptcha";

const Contact = () => {
    const initialValues = {
        fullName: '',
        email: '',
        reCaptcha: 'false',
    }

    const handleSubmit = () => {}

    return (
        <div>
            <Formik initialValues={initialValues} onSubmit={handleSubmit}>
                <Form noValidate id="contact-form">
                    <Field
                        type="text"
                        name="fullName"
                        dataTestId="fullName"
                        inputName="fullName"
                        labelText="Full Name"
                    />
                    <Field
                        type="text"
                        name="email"
                        dataTestId="email"
                        inputName="email"
                        labelText="email Address"
                    />
                <Recaptcha />
                </Form>
            </Formik>
        </div>
    );
}

This is how the content of the test Contact.test.tsx:

describe("Contact Us", () => {
    it('should render error notification', async () => {
        render(
            <Contact/>
        )

        await waitFor(() => {
            expect(screen.getByTestId('full-name').toBeInTheDocument())
        })

        let submitBtn = document.querySelector('#submit_contactus')
        act(() => {
            submitBtn?.dispatchEvent(
                new MouseEvent('click', {bubbles: true})
            )
        })

        await waitFor(async () => {
            window.HTMLElement.prototype.scrollIntoView = jest.fn()
            expect(
                screen.getByTestId('validation-error-notification')
            ).toBeInTheDocument()
        })
    })
})

Every time I run the test I keep getting the following error:

RUNS src/modules/contact/__tests__/Contact.test.tsx
/app/src/common/Recaptcha.tsx
    const recaptchaValue = recaptchaRef.current.getValue();

TypeError: recaptchaRef.current.getValue is not a function

Why? What else I am missing here?

0

There are 0 best solutions below