How to test with Jest and Enzyme a custom form hook? - reactjs

Question

I'm new doing automation testing, so I'm trying to do some unit tests, I built a usual custom hook to handle the form events and the inputs changes.
import { useState } from 'react'
const useFormHook = (callback) => {
const [inputs, setInputs] = useState({});
const handleSubmit = (e) => {
if (e) {
e.preventDefault();
}
setInputs({})
callback();
}
const handleInputChange = (e) => {
e.persist();
setInputs(inputs => ( {...inputs, [e.target.name]: e.target.value } ));
}
return{
handleSubmit,
handleInputChange,
inputs
}
}
export default useFormHook
and the implementation goes in to a search bar, which event will update a context state, and looks like this:
const SearchBar = () => {
const [search, setSearch] = useState('')
useAsyncHook(search); // I'm using an async custom hook to fetch some data with axios.
const handleFormSubmit = () => {
let targetValue = Object.values(inputs).join().toLowerCase()
setSearch(targetValue)
document.forms[0].reset()
}
const { inputs, handleSubmit, handleInputChange } = useCustomFormHook(handleFormSubmit)
return (
<form onSubmit={handleSubmit} className="searchForm">
<input
id='searchBar'
type="text"
name="value"
value={inputs.value || ''}
onChange={handleInputChange}
required
className={`input`}
/>
<input
className={`button primary`}
type="submit"
value="🔍 Search"
id='search-button'
/>
</form>
)
}
till now this work fine..:
import React from "react";
import { mount, shallow } from "enzyme";
//components and hooks
import useFormHook from "../../../Services/Hooks/customFormHook";
//import useAsyncHook from "../../../Services/Hooks/customAsyncHook";
//import SeachBar from "../SearchBar";
describe("Custom hooks suite test", () => {
// const wrapper = shallow(<SeachBar />);
let results;
const handleHookTester = (hook) => {
function HookWrapper() {
results = hook();
return null;
}
mount(<HookWrapper />);
return results;
};
it("Form hook test", () => {
handleHookTester(useFormHook);
expect(results.inputs).toStrictEqual({});
});
});
So far I've managed to make it work, but this is just the customFormHook and I'd like to test and my customAsyncHook which looks like this:
const useAsyncHook = (id) => {
const [loading, setLoading] = useState('false');
const { findData } = useContext(AppContext)
// 1 -
useEffect(() => {
async function getData() {
try {
setLoading('true');
const response = await axios(
`someEndPoint/${id}`
);
findData({type:FIND_DATA, data:response.data });
} catch (error) {
setLoading('null');
findData({type:FIND_DATA, data:null });
}
}
if (id !== "") {
getData();
}
}, [id]);
return loading;
}
and if I try something like const wrapper = shallow(<SearchBar/>) or:
handleHookTester(useAsyncHook); the test fails throwing the following error:
● Custom hooks suite test › encountered a declaration exception
TypeError: Cannot destructure property 'findData' of '(0 , _react.useContext)(...)' as it is undefined.
8 | const [loading, setLoading] = useState('false');
9 |
> 10 | const { findData } = useContext(AppContext)
| ^
11 | // 1 -
12 | useEffect(() => {
So the question is should I mock that function? and how?