add test

test/e2e/app-dir/rsc-external.test.ts

@@ -30,6 +30,7 @@ describe('app dir - rsc external dependency', () => {
     next = await createNext({
       files: new FileRef(path.join(__dirname, './rsc-external')),
       dependencies: {
+        '@next/font': 'canary',
         react: 'latest',
         'react-dom': 'latest',
         swr: '2.0.0-rc.0',
@@ -155,4 +156,14 @@ describe('app dir - rsc external dependency', () => {
       )
     ).toBe('rgb(255, 0, 0)')
   })
+
+  it('should handle external @next/font', async () => {
+    const browser = await webdriver(next.url, '/font')
+
+    expect(
+      await browser.eval(
+        `window.getComputedStyle(document.querySelector('p')).fontFamily`
+      )
+    ).toMatch(/^__myFont_.{6}, __myFont_Fallback_.{6}$/)
+  })
 })

test/e2e/app-dir/rsc-external/app/font/page.js

@@ -0,0 +1,5 @@
+import { myFont } from 'font'
+
+export default function Page() {
+  return <p className={myFont.className}>Hello world</p>
+}

test/e2e/app-dir/rsc-external/next.config.js

@@ -3,6 +3,6 @@ module.exports = {
   experimental: {
     appDir: true,
     serverComponentsExternalPackages: ['conditional-exports-optout'],
-    transpilePackages: ['untranspiled-module', 'css'],
+    transpilePackages: ['untranspiled-module', 'css', 'font'],
   },
 }

test/e2e/app-dir/rsc-external/node_modules_bak/font/index.ts

@@ -0,0 +1,3 @@
+import localFont from '@next/font/local'
+
+export const myFont = localFont({ src: './my-font.woff2' })

test/e2e/app-dir/rsc-external/node_modules_bak/font/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "font",
+  "main": "index.ts"
+}