0

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.

0 Answers0