From a237cb6c211579cd58179fc7d8150c20da8a2180 Mon Sep 17 00:00:00 2001
From: Jimmy Andrade <contato@jimmyandrade.com>
Date: Thu, 16 Jul 2026 13:21:03 -0300
Subject: [PATCH] fix(test): use forwardRef in gatsby Link mock to silence MUI
 ref warnings

MUI Link requires `component` to be a ref-capable element type. The Jest
mock for gatsby's Link was a plain function that also destructured `ref`
from props, triggering PropTypes and ref console warnings when rendering
Footer. Production gatsby Link already uses forwardRef; only the mock was
wrong. Adds a Footer regression test asserting the links render and the
warnings no longer fire.

Closes #441

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 __mocks__/gatsby.js                 | 35 +++++++++++++++++-----------
 src/components/Footer/index.test.js | 36 +++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/__mocks__/gatsby.js b/__mocks__/gatsby.js
index 5d6b467f..b69b11e6 100644
--- a/__mocks__/gatsby.js
+++ b/__mocks__/gatsby.js
@@ -1,26 +1,35 @@
 const React = require("react")
 const gatsby = jest.requireActual("gatsby")
-module.exports = {
-  ...gatsby,
-  graphql: jest.fn(),
-  Link: jest.fn().mockImplementation(
-    // these props are invalid for an `a` tag
-    ({
+
+// MUI Link / ListItem pass a ref into `component`. Production Gatsby Link already
+// uses forwardRef; the Jest mock must too or PropTypes and React warn in tests.
+// @see https://github.com/multei/web/issues/441
+const Link = React.forwardRef(
+  (
+    {
       activeClassName,
       activeStyle,
       getProps,
       innerRef,
       partiallyActive,
-      ref,
       replace,
       to,
       ...rest
-    }) =>
-      React.createElement("a", {
-        ...rest,
-        href: to,
-      })
-  ),
+    },
+    ref
+  ) =>
+    React.createElement("a", {
+      ...rest,
+      href: to,
+      ref,
+    })
+)
+Link.displayName = "GatsbyLink"
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link,
   StaticQuery: jest.fn(),
   useStaticQuery: jest.fn(),
 }
diff --git a/src/components/Footer/index.test.js b/src/components/Footer/index.test.js
index 7e15ee6a..7898a4e0 100644
--- a/src/components/Footer/index.test.js
+++ b/src/components/Footer/index.test.js
@@ -1,7 +1,19 @@
 import React from "react"
 import renderer from "react-test-renderer"
+import { render } from "@testing-library/react"
 import Footer from "."
 
+const isFooterLinkRefWarning = (args) =>
+  args.some(
+    (arg) =>
+      typeof arg === "string" &&
+      (arg.includes(
+        "Invalid prop `component` supplied to `ForwardRef(Link)`"
+      ) ||
+        arg.includes("`ref` is not a prop") ||
+        arg.includes("Function components cannot be given refs"))
+  )
+
 describe("Footer", () => {
   it("renders correctly", () => {
     const tree = renderer
@@ -9,4 +21,28 @@ describe("Footer", () => {
       .toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  it("renders help, privacy, and terms links via Gatsby Link without ref warnings", () => {
+    const consoleError = jest
+      .spyOn(console, "error")
+      .mockImplementation(() => {})
+
+    const { getByText } = render(<Footer siteTitle="Test site title" />)
+
+    expect(getByText("Ajuda").closest("a")).toHaveAttribute("href", "/ajuda")
+    expect(getByText("Privacidade").closest("a")).toHaveAttribute(
+      "href",
+      "/privacidade"
+    )
+    expect(getByText("Termos de uso").closest("a")).toHaveAttribute(
+      "href",
+      "/termos"
+    )
+
+    const linkRefWarnings = consoleError.mock.calls.filter(
+      isFooterLinkRefWarning
+    )
+    expect(linkRefWarnings).toHaveLength(0)
+    consoleError.mockRestore()
+  })
 })