This is my useLocalStorage.tsx file
function useLocalStorage() {
const getItem = (key: string) => {
if (typeof window !== "undefined" && window.localStorage) {
let requestedItem = localStorage.getItem(key) as string;
return requestedItem;
}
};
const setItem = (key: string, value: string) => {
if (typeof window !== "undefined" && window.localStorage) {
localStorage.setItem(key, value);
}
};
return {
getItem,
setItem,
};
}
export default useLocalStorage;
And this is my unit test code using react testing library
test("Renders the component correctly", async () => {
await act(async () => {
const {
getByTestId,
getByLabelText,
getByText,
getByRole,
findByTestId,
} = render(<Verification />);
});
});
I am doing unit test using react testing library. But it is throwing error like
● Verification component › Renders the component correctly
TypeError: (0 , _useLocalStorage.default) is not a function
48 | const { loading, setLoading } = useLoading();
49 | const { snack, setSnack, handleClose } = useSnack();
> 50 | const { getItem } = useLocalStorage();
| ^
51 |
52 | const timeEnded = () => {
53 | setTimerStarted(false);
at Verification (app/[lang]/auth/verification/page.tsx:50:38)
at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18)
at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20074:13)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21587:16)
at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14)
at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12)
at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20)
at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22)
at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
at recursivelyFlushAsyncActWork (node_modules/react/cjs/react.development.js:2633:9)
at node_modules/react/cjs/react.development.js:2545:15
I tried using waitFor method, for the component to gets rendered but it is not worked and i am expecting the reason behind why this custom hook causing error in my code.