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?