Add test for TLA in client references (#70022)

Fixes PACK-3246

Author: mischnic

test/e2e/app-dir/dynamic/app/dynamic/async-client/client-no-ssr.js

@@ -0,0 +1,7 @@
+'use client'
+
+let name = await Promise.resolve('async')
+
+export default (props) => {
+  return <button {...props}>this is an {name} client button</button>
+}

test/e2e/app-dir/dynamic/app/dynamic/async-client/client.js

@@ -0,0 +1,7 @@
+'use client'
+
+let name = await Promise.resolve('async')
+
+export default (props) => {
+  return <button {...props}>this is an {name} client button with SSR</button>
+}

test/e2e/app-dir/dynamic/app/dynamic/async-client/page.js

@@ -0,0 +1,13 @@
+import dynamic from 'next/dynamic'
+
+const Client1 = dynamic(() => import('./client'))
+const Client2 = dynamic(() => import('./client-no-ssr'), { ssr: false })
+
+export default function Page() {
+  return (
+    <>
+      <Client1 id="client-button" />
+      <Client2 id="client-button-no-ssr" />
+    </>
+  )
+}

test/e2e/app-dir/dynamic/dynamic.test.ts

@@ -148,5 +148,21 @@ describe('app dir - next/dynamic', () => {
       const $ = await next.render$('/dynamic/named-export')
       expect($('#client-button').text()).toBe('this is a client button')
     })
+
+    it('should support dynamic import with TLA in client components', async () => {
+      const $ = await next.render$('/dynamic/async-client')
+      expect($('#client-button').text()).toBe(
+        'this is an async client button with SSR'
+      )
+      expect($('#client-button-no-ssr').text()).toBe('')
+
+      const browser = await next.browser('/dynamic/async-client')
+      expect(await browser.elementByCss('#client-button').text()).toBe(
+        'this is an async client button with SSR'
+      )
+      expect(await browser.elementByCss('#client-button-no-ssr').text()).toBe(
+        'this is an async client button'
+      )
+    })
   })
 })

test/e2e/app-dir/rsc-basic/app/async-client/client.js

@@ -0,0 +1,9 @@
+'use client'
+
+import { useState } from 'react'
+
+let name = await Promise.resolve('async')
+
+export default (props) => {
+  return `client ${useState(name)[0]}`
+}

test/e2e/app-dir/rsc-basic/app/async-client/edge/lazy/page.js

@@ -0,0 +1,3 @@
+export { default } from '../../lazy/page'
+
+export const runtime = 'edge'

test/e2e/app-dir/rsc-basic/app/async-client/edge/sync/page.js

@@ -0,0 +1,3 @@
+export { default } from '../../sync/page'
+
+export const runtime = 'edge'

test/e2e/app-dir/rsc-basic/app/async-client/lazy/page.js

@@ -0,0 +1,7 @@
+import { lazy } from 'react'
+
+const Client = lazy(() => import('../client'))
+
+export default function Page() {
+  return <Client />
+}

test/e2e/app-dir/rsc-basic/app/async-client/sync/page.js

@@ -0,0 +1,5 @@
+import Client from '../client'
+
+export default function Page() {
+  return <Client />
+}

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

@@ -230,6 +230,24 @@ describe('app dir - rsc basics', () => {
     expect(html).toContain('dynamic data!')
   })
 
+  // TODO: TLA in client references are currently broken with Webpack on Edge
+  describe.each(process.env.TURBOPACK ? ['node', 'edge'] : ['node'])(
+    'client references with TLA (%s)',
+    (runtime) => {
+      let url = `/async-client${runtime === 'edge' ? '/edge' : ''}`
+
+      it('should support TLA in sync client reference imports', async () => {
+        const html = await next.render(url + '/sync')
+        expect(html).toContain('client async')
+      })
+
+      it('should support TLA in lazy client reference', async () => {
+        const html = await next.render(url + '/lazy')
+        expect(html).toContain('client async')
+      })
+    }
+  )
+
   if (isPPREnabledByDefault) {
     // TODO: Figure out why this test is flaky when PPR is enabled
   } else {