update tests and keep dynamic in client component

test/e2e/app-dir/app/app/dashboard/index/dynamic.client.js

@@ -3,5 +3,9 @@ import styles from './dynamic.module.css'
 
 export default function Dynamic() {
   let [state] = useState('next dynamic')
-  return <p className={styles.dynamic}>hello from modern the {state}</p>
+  return (
+    <p id="css-text-dynamic" className={styles.dynamic}>
+      hello from modern the {state}
+    </p>
+  )
 }

test/e2e/app-dir/app/app/dashboard/index/lazy.client.js

@@ -3,7 +3,9 @@ import styles from './lazy.module.css'
 export default function LazyComponent() {
   return (
     <>
-      <p className={styles.lazy}>hello from lazy</p>
+      <p id="css-text-lazy" className={styles.lazy}>
+        hello from lazy
+      </p>
     </>
   )
 }

test/e2e/app-dir/app/app/dashboard/index/next-dynamic.client.js

@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+const Dynamic = dynamic(() => import('./dynamic.client'))
+
+export function NextDynamicClientComponent() {
+  return <Dynamic />
+}

test/e2e/app-dir/app/app/dashboard/index/page.server.js

@@ -1,5 +1,5 @@
-import { LazyClientComponent } from './react-lazy.client.js'
-import { NextDynamicClientComponent } from './next-dynamic.server.js'
+import { LazyClientComponent } from './react-lazy.client'
+import { NextDynamicClientComponent } from './next-dynamic.client'
 
 export default function DashboardIndexPage() {
   return (

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

@@ -1,6 +1,6 @@
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
-import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
+import { check, fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
 import path from 'path'
 import cheerio from 'cheerio'
 import webdriver from 'next-webdriver'
@@ -64,11 +64,24 @@ describe('app dir', () => {
   it('should serve /index as separate page', async () => {
     const html = await renderViaHTTP(next.url, '/dashboard/index')
     expect(html).toContain('hello from app/dashboard/index')
+    // should load chunks generated via async import correctly
+    expect(html).toContain('hello from lazy')
   })
 
-  it('should load chunks generated via async import correctly', async () => {
-    const html = await renderViaHTTP(next.url, '/dashboard/index')
-    expect(html).toContain('hello from lazy')
+  // TODO-APP: handle css modules fouc in dev
+  it.skip('should handle css imports in next/dynamic correctly', async () => {
+    const browser = await webdriver(next.url, '/dashboard/index')
+
+    expect(
+      await browser.eval(
+        `window.getComputedStyle(document.querySelector('#css-text-dynamic')).color`
+      )
+    ).toBe('rgb(0, 0, 255)')
+    expect(
+      await browser.eval(
+        `window.getComputedStyle(document.querySelector('#css-text-lazy')).color`
+      )
+    ).toBe('rgb(128, 0, 128)')
   })
 
   it('should include layouts when no direct parent layout', async () => {

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

@@ -361,7 +361,9 @@ describe('app dir - react server components', () => {
         expect(gotInlinedData).toBe(true)
       }
     )
+  })
 
+  it('should support partial hydration with inlined server data in browser', async () => {
     // Should end up with "next_streaming_data".
     const browser = await webdriver(next.url, '/partial-hydration', {
       waitHydration: false,