fix(test): use forwardRef in gatsby Link mock to silence MUI ref warnings

__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(),
 }

src/components/Footer/index.test.js

@@ -1,12 +1,48 @@
 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
       .create(<Footer siteTitle="Test site title" />)
       .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()
+  })
 })