Mock @next/font when using next/jest (#42413)

Mock `@next/font` when using `next/jest`.

fixes #42379

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

docs/testing.md

@@ -293,7 +293,7 @@ module.exports = createJestConfig(customJestConfig)
 Under the hood, `next/jest` is automatically configuring Jest for you, including:
 
 - Setting up `transform` using [SWC](https://nextjs.org/docs/advanced-features/compiler)
-- Auto mocking stylesheets (`.css`, `.module.css`, and their scss variants) and image imports
+- Auto mocking stylesheets (`.css`, `.module.css`, and their scss variants), image imports and [`@next/font`](https://nextjs.org/docs/basic-features/font-optimization)
 - Loading `.env` (and all variants) into `process.env`
 - Ignoring `node_modules` from test resolving and transforms
 - Ignoring `.next` from test resolving

jest.config.js

@@ -14,6 +14,9 @@ const customJestConfig = {
   globals: {
     AbortSignal: global.AbortSignal,
   },
+  moduleNameMapper: {
+    '@next/font/(.*)': '@next/font/$1',
+  },
 }
 
 // createJestConfig is exported in this way to ensure that next/jest can load the Next.js config which is async

packages/next/build/jest/__mocks__/nextFontMock.js

@@ -0,0 +1,12 @@
+module.exports = new Proxy(
+  {},
+  {
+    get: function getter() {
+      return () => ({
+        className: 'className',
+        variable: 'variable',
+        style: { fontFamily: 'fontFamily' },
+      })
+    },
+  }
+)

packages/next/build/jest/jest.ts

@@ -115,6 +115,9 @@ export default function nextJest(options: { dir?: string } = {}) {
           // Keep .svg to it's own rule to make overriding easy
           '^.+\\.(svg)$': require.resolve(`./__mocks__/fileMock.js`),
 
+          // Handle @next/font
+          '@next/font/(.*)': require.resolve('./__mocks__/nextFontMock.js'),
+
           // custom config comes last to ensure the above rules are matched,
           // fixes the case where @pages/(.*) -> src/pages/$! doesn't break
           // CSS/image mocks

packages/next/build/swc/options.js

@@ -33,7 +33,6 @@ function getBaseSWCOptions({
   jsConfig,
   swcCacheDir,
   isServerLayer,
-  relativeFilePathFromRoot,
   hasServerComponents,
 }) {
   const parserConfig = getParserOptions({ filename, jsConfig })
@@ -131,15 +130,6 @@ function getBaseSWCOptions({
           isServer: !!isServerLayer,
         }
       : false,
-    fontLoaders:
-      nextConfig?.experimental?.fontLoaders && relativeFilePathFromRoot
-        ? {
-            fontLoaders: nextConfig.experimental.fontLoaders.map(
-              ({ loader }) => loader
-            ),
-            relativeFilePathFromRoot,
-          }
-        : null,
   }
 }
 
@@ -255,6 +245,15 @@ export function getLoaderSWCOptions({
     hasServerComponents,
   })
 
+  if (nextConfig?.experimental?.fontLoaders && relativeFilePathFromRoot) {
+    baseOptions.fontLoaders = {
+      fontLoaders: nextConfig.experimental.fontLoaders.map(
+        ({ loader }) => loader
+      ),
+      relativeFilePathFromRoot,
+    }
+  }
+
   const isNextDist = nextDistPath.test(filename)
 
   if (isServer) {

test/production/jest/index.test.ts

@@ -21,6 +21,11 @@ describe('next/jest', () => {
           import Image from "next/image";
           import img from "../public/vercel.svg";
           import styles from "../styles/index.module.css";
+          import localFont from "@next/font/local";
+          import { Inter } from "@next/font/google";
+
+          const inter = Inter();
+          const myFont = localFont({ src: "./my-font.woff2" });
 
           const Comp = dynamic(() => import("../components/comp"), {
             loading: () => <h1>Loading...</h1>,
@@ -32,6 +37,7 @@ describe('next/jest', () => {
               <Image src={img} alt="logo" placeholder="blur"/>
               <Image src={img} alt="logo 2"/>
               <p className={styles.home}>hello world</p>
+              <p style={{ fontFamily: inter.style.fontFamily }} className={myFont.className}>hello world</p>
             </>
           } 
         `,
@@ -118,8 +124,10 @@ describe('next/jest', () => {
             expect(router.push._isMockFunction).toBeTruthy()
           })
         `,
+        'pages/my-font.woff2': 'fake font',
       },
       dependencies: {
+        '@next/font': 'canary',
         jest: '27.4.7',
         '@testing-library/jest-dom': '5.16.1',
         '@testing-library/react': '12.1.2',