describe("Sidebar", () => {

  test("Toggle Sidebar", () => {

    const { result } = renderHook(() => useToggleSidebar());

    const { toggleSidebar } = result.current;

    ComponentRender(<ToggleButton toggleFunc={toggleSidebar} />);

    ComponentRender(<Sidebar />);

    fireEvent.click(screen.getByTestId("toggle-button"));

    expect(screen.getByTestId("sidebar")).toHaveClass("HiddenSidebar");

  });

});

export function ComponentRender(component: JSX.Element, options: IComponentRenderOptions = {}) {

  const { route = "/dashboard", initialState } = options;

  return render(

    <ReduxProvider initialState={initialState}>

      <ThemeProvider>

        <SidebarProvider>

          <MemoryRouter initialEntries={[route]}>{component}</MemoryRouter>

        </SidebarProvider>

      </ThemeProvider>

    </ReduxProvider>,

  );

}

export const SidebarProvider = (props: PropsWithChildren) => {

  const { children } = props;

  const [isSidebarShow, setToggleSidebar] = useState<boolean>(false);

  const defaultValue: ISidebarDefault = useMemo(

    () => ({

      isSidebarShow,

      setToggleSidebar,

    }),

    [isSidebarShow],

  );

  return <SidebarContext.Provider value={defaultValue}>{children}</SidebarContext.Provider>;

};

const useToggleSidebar = (): IUseToggleSidebar => {

  const { isSidebarShow, setToggleSidebar } = useContext(SidebarContext);

  const toggleSidebar = () => {

    setToggleSidebar((isSidebarShow: boolean) => !isSidebarShow);

    ^ <-- HERE IS ERROR setToggleSidebar is not a function

  };

  return { isSidebarShow, toggleSidebar };

};

  const { result } = renderHook(() => useToggleSidebar(), {

      wrapper: SidebarProvider

    });