This is a test code for evaluating the functionality of a component. I am checking whether a form submit function is triggered or not.
import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import * as nextRouter from 'next/router'
nextRouter.useRouter = jest.fn()
nextRouter.useRouter.mockImplementation(() => ({ route: '/' }))
import Locations from '../pages/settings/locations'
import Add from '../pages/settings/locations/add'
import { act } from 'react-dom/test-utils'
describe('Add Locations', () => {
nextRouter.useRouter.mockImplementation(() => ({ route: '/settings/locations/add', pathname: '/settings/locations/add' }));
let companies = [
{
"name": "Fake Company Express",
"phone": "9876543210",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8acbdabac98bbb7b5a8b9b6a1f6bbb7b5">[email protected]</a>",
"contact": "Test",
"address1": "Fake address1",
"address2": "Fake address2",
"address3": "",
"city": "Fake City",
"zip": "123456",
"state": "State",
"country": "Demo Test",
"UUID": "9d8616dd-4689-4689-8812-a2345ccdcfc5"
}
]
it('validate before save add location data', async () => {
const mockAdd = jest.fn()
const {getByLabelText, getByRole} = render(<Add data={companies} addLocation={mockAdd} />)
const addButton = screen.getByTestId('addLocationBtn')
await act(async () => {
fireEvent.change(getByRole("textbox", { name: /name/i }), {
target: { value: "sds" }
});
fireEvent.input(getByRole("combobox", { name: /company/i }), {
target: { value: "sdsd" }
});
})
await act(async () => {
fireEvent.click(addButton);
})
expect(mockAdd).toHaveBeenCalled()
})
})
The code for the Add Component looks like this:
import { useForm } from 'react-hook-form';
export default function Add({...props}) {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const addLocation = async (data) => {
console.log(data)
}
<form className="g-3" onSubmit={handleSubmit(addLocation)} data-testid="addLocationForm">
<div className="col-md-4 col-lg-4 col-sm-6 mb-3">
<label htmlFor="" className="form-label">Name</label>
<input type="text" {...register('name', { required: true })} className="form-control" data-testid="name" placeholder="Enter Name Here" />
{errors.name && <p className="error" role="error" data-testid="name_error">Name is required.</p>}
</div>
<input type="submit" className="btn btn-primary float-end" value="Save Location" data-testid="addLocationBtn" />
</form>
}
I have encountered an error while using react hook form:
TypeError: router.prefetch is not a function