full upgrade to dev

jest.setup.ts

@@ -1,65 +1,80 @@
-import 'whatwg-fetch';
+import "@testing-library/jest-dom";
+import "whatwg-fetch";
 import React from "react";
-import { render } from '@testing-library/react';
-import { ToastProvider } from '@/components/Toast';
+import { render } from "@testing-library/react";
+import { ToastProvider } from "@/components/Toast";
 
-// Fix for React production builds in testing
-// Mock React's act function for production builds
-if (process.env.NODE_ENV === 'production') {
-  // Override React.act for production builds
-  const originalAct = React.act;
-  if (!originalAct) {
-    // @ts-expect-error - Mock for production builds
-    React.act = (callback: () => void) => {
-      callback();
+// Set test environment
+process.env.NODE_ENV = "test";
+
+// Mock Next.js router
+jest.mock("next/navigation", () => ({
+  useRouter() {
+    return {
+      push: jest.fn(),
+      replace: jest.fn(),
+      prefetch: jest.fn(),
+      back: jest.fn(),
+      pathname: "/",
+      query: {},
+      asPath: "/",
     };
-  }
-  
-  // Also mock the act function from react-dom/test-utils
-  // This is handled by Jest's module resolution
-}
-
-// Mock react-responsive-masonry
-jest.mock("react-responsive-masonry", () => ({
-  __esModule: true,
-  default: ({ children }: { children: React.ReactNode }) =>
-    React.createElement("div", null, children),
-  get ResponsiveMasonry() {
-    const ResponsiveMasonryComponent = ({ children }: { children: React.ReactNode }) =>
-      React.createElement("div", null, children);
-    ResponsiveMasonryComponent.displayName = 'ResponsiveMasonry';
-    return ResponsiveMasonryComponent;
   },
+  usePathname() {
+    return "/";
+  },
+  useSearchParams() {
+    return new URLSearchParams();
+  },
+  notFound: jest.fn(),
 }));
 
 // Mock next/link
-jest.mock('next/link', () => {
-  const LinkComponent = ({ children }: { children: React.ReactNode }) => children;
-  LinkComponent.displayName = 'Link';
-  return LinkComponent;
+jest.mock("next/link", () => {
+  return function Link({ children, href }: any) {
+    return React.createElement("a", { href }, children);
+  };
 });
 
 // Mock next/image
-jest.mock('next/image', () => {
-  const ImageComponent = ({ src, alt, fill, priority, ...props }: Record<string, unknown>) => {
-    // Convert boolean props to strings for DOM compatibility
-    const domProps: Record<string, unknown> = { src, alt };
-    if (fill) domProps.style = { width: '100%', height: '100%', objectFit: 'cover' };
-    if (priority) domProps.loading = 'eager';
-    
-    return React.createElement('img', { ...domProps, ...props });
+jest.mock("next/image", () => {
+  return function Image({ src, alt, ...props }: any) {
+    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+    return React.createElement("img", { src, alt, ...props });
+  };
+});
+
+// Mock react-responsive-masonry if it's used
+jest.mock("react-responsive-masonry", () => {
+  const MasonryComponent = function Masonry({ children }: any) {
+    return React.createElement("div", { "data-testid": "masonry" }, children);
+  };
+
+  const ResponsiveMasonryComponent = function ResponsiveMasonry({
+    children,
+  }: any) {
+    return React.createElement(
+      "div",
+      { "data-testid": "responsive-masonry" },
+      children,
+    );
+  };
+
+  return {
+    __esModule: true,
+    default: MasonryComponent,
+    ResponsiveMasonry: ResponsiveMasonryComponent,
   };
-  ImageComponent.displayName = 'Image';
-  return ImageComponent;
 });
 
 // Custom render function with ToastProvider
 const customRender = (ui: React.ReactElement, options = {}) =>
   render(ui, {
-    wrapper: ({ children }) => React.createElement(ToastProvider, null, children),
+    wrapper: ({ children }) =>
+      React.createElement(ToastProvider, null, children),
     ...options,
   });
 
 // Re-export everything
-export * from '@testing-library/react';
-export { customRender as render };
+export * from "@testing-library/react";
+export { customRender as render };