fix: mock next/image for denom image test

fmorency · Aug 23, 2024 · d6a9b4b · d6a9b4b
1 parent d1d1e7b
commit d6a9b4b
Showing 1 changed file with 22 additions and 14 deletions.
diff --git a/components/factory/components/__tests__/DenomImage.test.tsx b/components/factory/components/__tests__/DenomImage.test.tsx
@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, test, fireEvent } from "bun:test";
+import { afterEach, describe, expect, test, fireEvent, mock } from "bun:test";
 import React from "react";
 import { screen, cleanup, waitFor } from "@testing-library/react";
 import { DenomImage } from "@/components/factory/components/DenomImage";
@@ -7,11 +7,22 @@ import { renderWithChainProvider } from "@/tests/render";
 
 expect.extend(matchers);
 
+// A cute little candle gif
+const uri = 'https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExdHg1aHVqa3NoMG45bzYwbHR5ODk3b2JqbHhnemlmcXpjOXB0enExMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/zHcirZSkw8RSDhawFl/giphy.gif';
+
+// Mock next/image
+mock.module('next/image', () => ({
+  __esModule: true,
+  default: (props: any) => {
+    return <img {...props} />
+  },
+}))
+
 const renderWithProps = (props = {}) => {
   const defaultProps = {
     denom: {
       base: "umfx",
-      uri: "https://example.com/token.png",
+      uri: uri,
     },
   };
   return renderWithChainProvider(<DenomImage {...defaultProps} {...props} />);
@@ -25,22 +36,19 @@ describe("DenomImage", () => {
     expect(screen.getByLabelText("denom image skeleton")).toBeInTheDocument();
   });
 
-  // TODO: Make this work with Bun + Next.js Statis Images
-  // test("renders MFX token image correctly", async () => {
-  //   renderWithProps();
-  //   await waitFor(() => expect(screen.getByAltText("MFX Token Icon")).toBeInTheDocument());
-  // });
+  test("renders MFX token image correctly", async () => {
+    renderWithProps();
+    await waitFor(() => expect(screen.getByAltText("MFX Token Icon")).toBeInTheDocument(), { timeout: 2000 });
+  });
 
   test("renders ProfileAvatar for unsupported URL", async () => {
     renderWithProps({ denom: { base: "unsupported", uri: "https://unsupported.com/token.png" } });
     await waitFor(() => expect(screen.getByAltText("Profile Avatar")).toBeInTheDocument(), { timeout: 2000 });
   });
 
 
-  // TODO: Make this work with Bun
-  // test("renders image from supported URL", async () => {
-  //   const uri = 'https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExdHg1aHVqa3NoMG45bzYwbHR5ODk3b2JqbHhnemlmcXpjOXB0enExMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/zHcirZSkw8RSDhawFl/giphy.gif';
-  //   renderWithProps({ denom: { base: "supported", uri: uri } });
-  //   await waitFor(() => expect(screen.getByAltText("Token Icon")).toBeInTheDocument(), { timeout: 2000 });
-  // });
-});
+  test("renders image from supported URL", async () => {
+    renderWithProps({ denom: { base: "supported", uri: uri } });
+    await waitFor(() => expect(screen.getByAltText("Token Icon")).toBeInTheDocument(), { timeout: 2000 });
+  });
+});