Test TLA

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 the client component', 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'
+      )
+    })
   })
 })