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(