From 8a9ddc5af5398207eee2831943f7bd0cec346e92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Born=C3=B6?= Date: Thu, 3 Nov 2022 15:41:14 +0100 Subject: [PATCH 1/5] Never transform @next/font in jest --- packages/next/build/swc/options.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js index 6dfb154cd0e1..673d4a0dd279 100644 --- a/packages/next/build/swc/options.js +++ b/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) { From 2f18e40d46f5a9cf9f78092ad993ae974c647a50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Born=C3=B6?= Date: Thu, 3 Nov 2022 15:42:15 +0100 Subject: [PATCH 2/5] mock @next/font --- packages/next/build/jest/__mocks__/nextFontMock.js | 12 ++++++++++++ packages/next/build/jest/jest.ts | 3 +++ 2 files changed, 15 insertions(+) create mode 100644 packages/next/build/jest/__mocks__/nextFontMock.js diff --git a/packages/next/build/jest/__mocks__/nextFontMock.js b/packages/next/build/jest/__mocks__/nextFontMock.js new file mode 100644 index 000000000000..f076797502d8 --- /dev/null +++ b/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' }, + }) + }, + } +) diff --git a/packages/next/build/jest/jest.ts b/packages/next/build/jest/jest.ts index ef17dc10a189..8b1e704bc1b0 100644 --- a/packages/next/build/jest/jest.ts +++ b/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 From 61c070c68ee5e550f333d88a507d280f51ffc565 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Born=C3=B6?= Date: Thu, 3 Nov 2022 15:42:27 +0100 Subject: [PATCH 3/5] Update docs --- docs/testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/testing.md b/docs/testing.md index 7dca84b8879a..7414761d37c3 100644 --- a/docs/testing.md +++ b/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 From e3b41010916d4766bef69bf01bc84b8ddaeadfd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Born=C3=B6?= Date: Thu, 3 Nov 2022 15:42:40 +0100 Subject: [PATCH 4/5] Update test --- test/production/jest/index.test.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/test/production/jest/index.test.ts b/test/production/jest/index.test.ts index 5b831c902609..67db89fb5db3 100644 --- a/test/production/jest/index.test.ts +++ b/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: () =>

Loading...

, @@ -32,6 +37,7 @@ describe('next/jest', () => { logo logo 2

hello world

+

hello world

} `, @@ -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', From c5318e7e510352735ab8bedd6204fad1ba7d47b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Born=C3=B6?= Date: Thu, 3 Nov 2022 16:32:42 +0100 Subject: [PATCH 5/5] Don't mock @next/font in next unit tests --- jest.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/jest.config.js b/jest.config.js index a99f0afcea12..177949779f05 100644 --- a/jest.config.js +++ b/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