Fix flicker in SSR when using dark mode

src/__test-utils__/helpers.tsx

@@ -0,0 +1,19 @@
+import { ThemeProvider } from "@mui/material/styles";
+import { DiamondTheme } from "../themes/DiamondTheme";
+import { render, RenderResult } from "@testing-library/react";
+import { ThemeProviderProps } from "@mui/material/styles/ThemeProvider";
+
+export const renderWithProviders = (
+  ui: React.ReactNode,
+  themeOptions?: Omit<ThemeProviderProps, "theme">,
+): RenderResult => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => {
+    return (
+      <ThemeProvider {...themeOptions} theme={DiamondTheme}>
+        {children}
+      </ThemeProvider>
+    );
+  };
+
+  return render(ui, { wrapper: Wrapper });
+};

src/components/Footer.test.tsx

@@ -1,38 +1,34 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import dlsLogo from "../public/generic/logo-short.svg";
 import { Footer, FooterLink, FooterLinks } from "./Footer";
 import { ImageColorSchemeSwitch } from "./ImageColorSchemeSwitch";
-import { ThemeProvider } from "../themes/ThemeProvider";
+import { renderWithProviders } from "../__test-utils__/helpers";
 
 jest.mock("./ImageColorSchemeSwitch");
 // @ts-expect-error: doesn't find mockImplementation outside of testing.
 ImageColorSchemeSwitch.mockImplementation(() => <img src="src" alt="alt" />);
 
 describe("Footer", () => {
   test("Should render logo only", () => {
-    render(<Footer logo={{ src: dlsLogo, alt: "t" }} />);
+    renderWithProviders(<Footer logo={{ src: dlsLogo, alt: "t" }} />);
 
     expect(screen.getByRole("img")).toBeInTheDocument();
     // No copyright text
     expect(screen.queryByRole("paragraph")).not.toBeInTheDocument();
   });
 
   test("Should render logo via theme", () => {
-    render(
-      <ThemeProvider>
-        <Footer logo="theme" />
-      </ThemeProvider>,
-    );
+    renderWithProviders(<Footer logo="theme" />);
 
     expect(screen.getByRole("img")).toBeInTheDocument();
   });
 
   test("Should render copyright only", async () => {
     const copyrightText = "add text here";
     const currentYear = new Date().getFullYear();
-    render(<Footer logo={null} copyright={copyrightText} />);
+    renderWithProviders(<Footer logo={null} copyright={copyrightText} />);
 
     await waitFor(() => {
       expect(screen.queryByRole("paragraph")).toBeInTheDocument();
@@ -47,7 +43,7 @@ describe("Footer", () => {
   test("Should render logo and copyright", async () => {
     const copyrightText = "add text here";
     const currentYear = new Date().getFullYear();
-    render(
+    renderWithProviders(
       <Footer logo={{ src: dlsLogo, alt: "" }} copyright={copyrightText} />,
     );
 
@@ -65,7 +61,7 @@ describe("Footer", () => {
     const lineOneText = "Link one";
     const linkOneName = "link-one-href";
 
-    render(
+    renderWithProviders(
       <Footer>
         <FooterLinks>
           <FooterLink href={linkOneName}>{lineOneText}</FooterLink>
@@ -87,7 +83,7 @@ describe("Footer", () => {
     const linkTwoText = "Link two";
     const linkOneName = "link-one-href";
     const linkTwoName = "link-two-href";
-    render(
+    renderWithProviders(
       <Footer>
         <FooterLinks>
           <FooterLink href={linkOneName}>{linkOneText}</FooterLink>

src/components/Footer.tsx

@@ -42,7 +42,7 @@ const FooterLink = ({ children, ...props }: LinkProps) => {
     <Link
       sx={{
         "&:hover": {
-          color: theme.palette.secondary.main,
+          color: theme.vars.palette.secondary.main,
           borderBottom: "solid 4px",
         },
         textDecoration: "none",
@@ -74,7 +74,7 @@ const Footer = ({ logo, copyright, children, ...props }: FooterProps) => {
         bottom: 0,
         marginTop: "auto",
         minHeight: 50,
-        backgroundColor: theme.palette.primary.light,
+        backgroundColor: theme.vars.palette.primary.light,
       }}
       {...props}
     >

src/components/ImageColorSchemeSwitch.test.tsx

@@ -1,13 +1,8 @@
 import "@testing-library/jest-dom";
-import { render } from "@testing-library/react";
 
-import { ImageColorSchemeSwitch, getLogoSrc } from "./ImageColorSchemeSwitch";
-
-jest.mock("@mui/material", () => {
-  return {
-    useColorScheme: jest.fn().mockReturnValue({ mode: "dark" }),
-  };
-});
+import { ImageColorSchemeSwitch } from "./ImageColorSchemeSwitch";
+import { renderWithProviders } from "../__test-utils__/helpers";
+import { screen } from "@testing-library/react";
 
 describe("ImageColorSchemeSwitch", () => {
   const testVals = {
@@ -22,17 +17,17 @@ describe("ImageColorSchemeSwitch", () => {
     width?: string;
     height?: string;
   }) {
-    const { getByAltText } = render(
+    const { getByTestId } = renderWithProviders(
       <ImageColorSchemeSwitch image={{ ...testVals, ...image }} />,
     );
 
-    const img = getByAltText(testVals.alt);
+    const img = getByTestId("image-light");
     expect(img).toBeInTheDocument();
     return img;
   }
 
   it("should render without errors", () => {
-    render(<ImageColorSchemeSwitch image={{ ...testVals }} />);
+    renderWithProviders(<ImageColorSchemeSwitch image={{ ...testVals }} />);
   });
 
   it("should have src and alt by default", () => {
@@ -66,46 +61,12 @@ describe("ImageColorSchemeSwitch", () => {
   it("should have alternate src", () => {
     const srcDark = "src/dark";
 
-    const img = getRenderImg({
-      srcDark,
-    });
-
-    expect(img).toHaveAttribute("src", srcDark);
-  });
-});
-
-describe("getLogoSrc", () => {
-  const srcLight = "src/light",
-    srcDark = "src/dark";
-
-  it("should be null if no image", () => {
-    // @ts-expect-error: invalid input
-    expect(getLogoSrc(null, "")).toStrictEqual(undefined);
-    // @ts-expect-error: invalid input, calm down ts
-    expect(getLogoSrc()).toStrictEqual(undefined);
-  });
-
-  it("should be srcLight if no srcDark", () => {
-    expect(getLogoSrc({ src: srcLight, alt: "" }, "light")).toStrictEqual(
-      srcLight,
+    renderWithProviders(
+      <ImageColorSchemeSwitch image={{ ...testVals, srcDark }} />,
+      { defaultMode: "dark" },
     );
-  });
+    const img = screen.getByTestId("image-dark");
 
-  it("should be srcLight if mode is dark but no srcDark", () => {
-    expect(getLogoSrc({ src: srcLight, alt: "" }, "dark")).toStrictEqual(
-      srcLight,
-    );
-  });
-
-  it("should be srcLight if srcDark but mode light", () => {
-    expect(
-      getLogoSrc({ src: srcLight, srcDark: srcDark, alt: "" }, "light"),
-    ).toStrictEqual(srcLight);
-  });
-
-  it("should be srcDark if mode dark", () => {
-    expect(
-      getLogoSrc({ src: "src/light", srcDark: srcDark, alt: "" }, "dark"),
-    ).toStrictEqual(srcDark);
+    expect(img).toHaveAttribute("src", srcDark);
   });
 });

src/components/ImageColorSchemeSwitch.tsx

@@ -1,4 +1,4 @@
-import { useColorScheme } from "@mui/material";
+import { styled } from "@mui/material";
 
 type ImageColorSchemeSwitchType = {
   src: string;
@@ -12,28 +12,40 @@ interface ImageColorSchemeSwitchProps {
   image: ImageColorSchemeSwitchType;
 }
 
-export function getLogoSrc(image: ImageColorSchemeSwitchType, mode: string) {
-  if (!image) {
-    return undefined;
-  }
-
-  if (image.srcDark === undefined) {
-    return image.src;
-  }
-
-  return mode === "dark" ? image.srcDark : image.src;
-}
-
-const ImageColorSchemeSwitch = ({ image }: ImageColorSchemeSwitchProps) => {
-  const { mode } = useColorScheme();
-  if (!mode) return <></>;
-
-  const src: string | undefined = getLogoSrc(image, mode);
-
-  return (
-    <img src={src} alt={image.alt} width={image.width} height={image.height} />
-  );
-};
+/** Styled component which is only displayed in dark mode */
+const ImageDark = styled("img")(({ theme }) => [
+  { display: "none" },
+  theme.applyStyles("dark", {
+    display: "block",
+  }),
+]);
+
+/** Styled component which is only displayed in light mode */
+const ImageLight = styled("img")(({ theme }) => [
+  { display: "block" },
+  theme.applyStyles("dark", {
+    display: "none",
+  }),
+]);
+
+const ImageColorSchemeSwitch = ({ image }: ImageColorSchemeSwitchProps) => (
+  <>
+    <ImageLight
+      data-testid="image-light"
+      src={image.src}
+      alt={image.alt}
+      width={image.width}
+      height={image.height}
+    />
+    <ImageDark
+      data-testid="image-dark"
+      src={image.srcDark}
+      alt={image.alt}
+      width={image.width}
+      height={image.height}
+    />
+  </>
+);
 
 export { ImageColorSchemeSwitch };
 export type { ImageColorSchemeSwitchProps, ImageColorSchemeSwitchType };

src/components/Navbar.test.tsx

@@ -1,19 +1,20 @@
-import { fireEvent, screen, render } from "@testing-library/react";
+import { fireEvent, screen } from "@testing-library/react";
 import { Navbar, NavLinks, NavLink } from "./Navbar";
 import "@testing-library/jest-dom";
+import { renderWithProviders } from "../__test-utils__/helpers";
 
 describe("Navbar", () => {
   it("should not display logo if null", () => {
     global.innerWidth = 600;
-    render(<Navbar logo={null} />);
+    renderWithProviders(<Navbar logo={null} />);
     expect(screen.queryByAltText("Home")).not.toBeInTheDocument();
   });
 });
 
 describe("Navbar Links", () => {
   it("should display hamburger menu on narrow displays", () => {
     global.innerWidth = 600;
-    render(
+    renderWithProviders(
       <NavLinks>
         <NavLink>Proposals</NavLink>
       </NavLinks>,
@@ -25,7 +26,7 @@ describe("Navbar Links", () => {
 
   it("should display menu items when hamburger menu is clicked", () => {
     global.innerWidth = 600;
-    render(
+    renderWithProviders(
       <NavLinks>
         <NavLink>Proposals</NavLink>
       </NavLinks>,
@@ -38,7 +39,7 @@ describe("Navbar Links", () => {
 
   it("should render links properly", () => {
     global.innerWidth = 600;
-    render(
+    renderWithProviders(
       <NavLinks>
         <NavLink>Proposals</NavLink>
       </NavLinks>,

src/components/Navbar.tsx

@@ -91,7 +91,7 @@ const NavLinks = ({ children }: NavLinksProps) => {
         onClose={onClose}
         anchor="left"
         PaperProps={{
-          sx: { backgroundColor: theme.palette.primary.main },
+          sx: { backgroundColor: theme.vars.palette.primary.main },
         }}
       >
         <Box
@@ -101,7 +101,7 @@ const NavLinks = ({ children }: NavLinksProps) => {
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
-            backgroundColor: theme.palette.primary.main,
+            backgroundColor: theme.vars.palette.primary.main,
           }}
         >
           {children}
@@ -126,7 +126,7 @@ const Navbar = ({ children, logo, ...props }: NavbarProps) => {
       <Paper
         sx={{
           display: "flex",
-          backgroundColor: theme.palette.primary.main,
+          backgroundColor: theme.vars.palette.primary.main,
           px: { xs: "1rem", md: "7.5vw" },
           height: 50,
           width: "100%",