How do I write test for hooks? - reactjs

Question

I am making unit test for the component and also trying to make a test for hook but I can't seem to get it working. This is my hook. What do I need to change or do to fix this test?
import { useState } from 'react';
function UseToggleState (initialValue = false) {
const [state, setState] = useState(initialValue);
const toggle = () => setState(!state);
return [state, toggle];
};
export default UseToggleState
And this is the component I am using it.
export function Todo({ id, task, completed }) {
const classes = useStyles();
const dispatch = useContext(DispatchContext);
const [isEditing, toggle] = useToggleState(false);
if (isEditing) {
return (
<li
className={classes.Todo}
style={{ overflowY: "hidden" }}
onClick={() => toggle()}
>
<EditForm id={id} task={task} toggleEditForm={toggle} />
</li>
);
}
return (
<li
className={classes.Todo}
onClick={() => dispatch({ type: TOGGLE_TODO, id })}
>
<span
style={{
textDecoration: completed ? "line-through" : "",
color: completed ? "#A9ABAE" : "#34495e",
}}
>
{task}
</span>
<div className={classes.icons}>
<FontAwesomeIcon
icon={faPen}
size="1x"
onClick={(e) => {
e.stopPropagation();
toggle();
}}
/>{" "}
<FontAwesomeIcon
icon={faTrash}
size="1x"
color={"#c0392b"}
onClick={(e) => {
e.stopPropagation();
dispatch({ type: REMOVE_TODO, id });
}}
/>
</div>
</li>
);
}
And the test file is as follows. It keeps saying that toggle is not a function and I am not quite sure why it is doing that. Is there something I need to change differently to make it work?
describe("useToggleState", () => {
it("Initial toggle is true", () => {
const { result } = renderHook(() => UseToggleState(true))
act(() => {
result.current.toggle
})
expect(result.current.state).toBeTruthy()
})
it("Toggle is false", () => {
const { result } = renderHook(() => UseToggleState(false))
act(() => {
result.current.toggle
})
expect(result.current.state).toBeFalsy()
})
})

Answer 1

You test is supposed to be:
describe("useToggleState", () => {
it("Initial toggle is false", () => {
const { result } = renderHook(() => UseToggleState(true))
act(() => {
result.current[1]()
})
expect(result.current[0]).toBe(false)
})
it("Toggle is true", () => {
const { result } = renderHook(() => UseToggleState())
act(() => {
result.current[1]()
})
expect(result.current[0]).toBe(true)
})
})