Test TLA

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'
+ )
+ })
  })
 })