next/font tests: support Turbopack css module format (#46658)

Turbopack uses a different format for its css module classnames [0]. This adds and uses a helper function to the next-font tests to assert against these classnames when testing with Turbopack. Ideally these tests could be more behavioral (e.g. asserting on rendered dimensions), but these can't capture things like fallback fonts. [0] vercel/turborepo#3437
vercel · Mar 6, 2023 · a9be890 · a9be890
1 parent 440b95e
commit a9be890
Showing 1 changed file with 20 additions and 13 deletions.
diff --git a/test/e2e/next-font/index.test.ts b/test/e2e/next-font/index.test.ts
@@ -1,14 +1,21 @@
 import cheerio from 'cheerio'
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
-import { renderViaHTTP } from 'next-test-utils'
+import { renderViaHTTP, shouldRunTurboDevTest } from 'next-test-utils'
 import { join } from 'path'
 import webdriver from 'next-webdriver'
 
 const mockedGoogleFontResponses = require.resolve(
   './google-font-mocked-responses.js'
 )
 
+function getClassNameRegex(className: string): RegExp {
+  // Turbopack uses a different format for its css modules than webpack-based Next.js
+  return shouldRunTurboDevTest()
+    ? new RegExp(`^${className}__.*__.{8}$`) // e.g. `className__inter_c6e282f1__a8cc5613`
+    : new RegExp(`^__${className}_.{6}$`) // e.g. `__className_a8cc56`
+}
+
 describe('next/font', () => {
   describe.each([['app'], ['app-old']])('%s', (fixture: string) => {
     let next: NextInstance
@@ -45,8 +52,8 @@ describe('next/font', () => {
 
         // _app.js
         expect(JSON.parse($('#app-open-sans').text())).toEqual({
-          className: expect.stringMatching(/^__className_.{6}$/),
-          variable: expect.stringMatching(/^__variable_.{6}$/),
+          className: expect.stringMatching(getClassNameRegex('className')),
+          variable: expect.stringMatching(getClassNameRegex('variable')),
           style: {
             fontFamily: expect.stringMatching(
               /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/
@@ -57,8 +64,8 @@ describe('next/font', () => {
 
         // with-fonts.js
         expect(JSON.parse($('#with-fonts-open-sans').text())).toEqual({
-          className: expect.stringMatching(/^__className_.{6}$/),
-          variable: expect.stringMatching(/^__variable_.{6}$/),
+          className: expect.stringMatching(getClassNameRegex('className')),
+          variable: expect.stringMatching(getClassNameRegex('variable')),
           style: {
             fontFamily: expect.stringMatching(
               /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/
@@ -69,7 +76,7 @@ describe('next/font', () => {
 
         // CompWithFonts.js
         expect(JSON.parse($('#comp-with-fonts-inter').text())).toEqual({
-          className: expect.stringMatching(/^__className_.{6}$/),
+          className: expect.stringMatching(getClassNameRegex('className')),
           style: {
             fontFamily: expect.stringMatching(
               /^'__Inter_.{6}', '__Inter_Fallback_.{6}'$/
@@ -79,7 +86,7 @@ describe('next/font', () => {
           },
         })
         expect(JSON.parse($('#comp-with-fonts-roboto').text())).toEqual({
-          className: expect.stringMatching(/^__className_.{6}$/),
+          className: expect.stringMatching(getClassNameRegex('className')),
           style: {
             fontFamily: expect.stringMatching(
               /^'__Roboto_.{6}', '__Roboto_Fallback_.{6}'$/
@@ -96,8 +103,8 @@ describe('next/font', () => {
 
         // _app.js
         expect(JSON.parse($('#app-open-sans').text())).toEqual({
-          className: expect.stringMatching(/__className_.{6}/),
-          variable: expect.stringMatching(/__variable_.{6}/),
+          className: expect.stringMatching(getClassNameRegex('className')),
+          variable: expect.stringMatching(getClassNameRegex('variable')),
           style: {
             fontFamily: expect.stringMatching(
               /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/
@@ -108,7 +115,7 @@ describe('next/font', () => {
 
         // with-local-fonts.js
         expect(JSON.parse($('#first-local-font').text())).toEqual({
-          className: expect.stringMatching(/__className_.{6}/),
+          className: expect.stringMatching(getClassNameRegex('className')),
           style: {
             fontFamily: expect.stringMatching(
               /^'__myFont1_.{6}', '__myFont1_Fallback_.{6}', system-ui$/
@@ -118,8 +125,8 @@ describe('next/font', () => {
           },
         })
         expect(JSON.parse($('#second-local-font').text())).toEqual({
-          className: expect.stringMatching(/^__className_.{6}$/),
-          variable: expect.stringMatching(/^__variable_.{6}$/),
+          className: expect.stringMatching(getClassNameRegex('className')),
+          variable: expect.stringMatching(getClassNameRegex('variable')),
           style: {
             fontFamily: expect.stringMatching(
               /^'__myFont2_.{6}', '__myFont2_Fallback_.{6}'$/
@@ -136,7 +143,7 @@ describe('next/font', () => {
         const $ = cheerio.load(html)
 
         expect(JSON.parse($('#nabla').text())).toEqual({
-          className: expect.stringMatching(/__className_.{6}/),
+          className: expect.stringMatching(getClassNameRegex('className')),
           style: {
             fontFamily: expect.stringMatching(/^'__Nabla_.{6}'$/),
             fontStyle: 'normal',