denshooter
dacec18956
- Replace next-themes (38 KiB) with a tiny custom ThemeProvider (~< 1 KiB) using localStorage + classList.toggle for theme management - Add FOUC-prevention inline script in layout.tsx to apply saved theme before React hydrates - Remove framer-motion from Header.tsx: nav entry now uses CSS slideDown keyframe, mobile menu uses CSS opacity/translate transitions - Remove framer-motion from ThemeToggle.tsx: use Tailwind hover/active scale - Remove framer-motion from legal-notice and privacy-policy pages - Update useTheme import in ThemeToggle to use custom ThemeProvider - Add slideDown keyframe to tailwind.config.ts - Update tests to mock custom ThemeProvider instead of next-themes Result: framer-motion moves from "First Load JS shared by all" to lazy chunks; next-themes chunk eliminated entirely; -38 KiB from initial bundle Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
20 lines
595 B
TypeScript
20 lines
595 B
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import { ThemeToggle } from "@/app/components/ThemeToggle";
|
|
|
|
// Mock custom ThemeProvider
|
|
jest.mock("@/app/components/ThemeProvider", () => ({
|
|
useTheme: () => ({
|
|
theme: "light",
|
|
setTheme: jest.fn(),
|
|
}),
|
|
ThemeProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
|
}));
|
|
|
|
describe("ThemeToggle Component", () => {
|
|
it("renders the theme toggle button", () => {
|
|
render(<ThemeToggle />);
|
|
// Initial render should have the button
|
|
expect(screen.getByRole("button")).toBeInTheDocument();
|
|
});
|
|
});
|