Update tests

vercel · Sep 24, 2024 · 51ac115 · 51ac115
1 parent 9eff03d
commit 51ac115
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 20 deletions.
diff --git a/crates/next-custom-transforms/src/transforms/react_server_components.rs b/crates/next-custom-transforms/src/transforms/react_server_components.rs
@@ -303,7 +303,7 @@ fn report_error(app_dir: &Option<PathBuf>, filepath: &str, error_kind: RSCErrorK
             _ => (format!("\"{source}\" is deprecated."), span),
         },
         RSCErrorKind::NextSsrDynamicFalseNotAllowed(span) => (
-            "{ ssr: false } is not allowed in Server Components. Use { ssr: true } instead."
+            "`ssr: false` is not allowed with `next/dynamic` in Server Components. Please move it into a client component."
                 .to_string(),
             span,
         ),

diff --git a/...s/client-graph/dynamic-ssr-false/input.js → ...s/server-graph/dynamic-ssr-false/input.js b/...s/client-graph/dynamic-ssr-false/input.js → ...s/server-graph/dynamic-ssr-false/input.js
diff --git a/.../client-graph/dynamic-ssr-false/output.js → .../server-graph/dynamic-ssr-false/output.js b/.../client-graph/dynamic-ssr-false/output.js → .../server-graph/dynamic-ssr-false/output.js
diff --git a/...ent-graph/dynamic-ssr-false/output.stderr → ...ver-graph/dynamic-ssr-false/output.stderr b/...ent-graph/dynamic-ssr-false/output.stderr → ...ver-graph/dynamic-ssr-false/output.stderr
@@ -1,4 +1,4 @@
-  x { ssr: false } is not allowed in Server Components. Use { ssr: true } instead.
+  x `ssr: false` is not allowed with `next/dynamic` in Server Components. Please move it into a client component.
    ,-[input.js:4:1]
  3 | export default function () {
  4 |   return dynamic(() => import('client-only'), { ssr: false })

diff --git a/test/development/app-dir/server-component-next-dynamic-ssr-false/app/client.js b/test/development/app-dir/server-component-next-dynamic-ssr-false/app/client.js
@@ -0,0 +1,5 @@
+'use client'
+
+export default function Client() {
+  return 'client'
+}
diff --git a/test/development/app-dir/server-component-next-dynamic-ssr-false/app/layout.js b/test/development/app-dir/server-component-next-dynamic-ssr-false/app/layout.js
@@ -0,0 +1,7 @@
+export default function Root({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/development/app-dir/server-component-next-dynamic-ssr-false/app/page.js b/test/development/app-dir/server-component-next-dynamic-ssr-false/app/page.js
@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+const DynamicClient = dynamic(() => import('./client'), { ssr: false })
+
+export default function Page() {
+  return <DynamicClient />
+}
diff --git a/...r/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts b/...r/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts
@@ -0,0 +1,36 @@
+import { nextTestSetup } from 'e2e-utils'
+import {
+  assertHasRedbox,
+  getRedboxDescription,
+  getRedboxSource,
+} from 'next-test-utils'
+
+describe('app-dir - server-component-next-dynamic-ssr-false', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should error when use dynamic ssr:false in server component', async () => {
+    const browser = await next.browser('/')
+    await assertHasRedbox(browser)
+    const redbox = {
+      description: await getRedboxDescription(browser),
+      source: await getRedboxSource(browser),
+    }
+
+    expect(redbox.description).toBe('Failed to compile')
+    expect(redbox.source).toMatchInlineSnapshot(`
+      "./app/page.js
+      Error:   x \`ssr: false\` is not allowed with \`next/dynamic\` in Server Components. Please move it into a client component.
+         ,-[3:1]
+       1 | import dynamic from "next/dynamic"
+       2 | 
+       3 | const DynamicClient = dynamic(() => import('./client'), { ssr: false })
+         :                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+       4 | 
+       5 | export default function Page() {
+       6 |   return <DynamicClient />
+         \`----"
+    `)
+  })
+})
diff --git a/test/e2e/app-dir/dynamic/app/dynamic/async-client/page.js b/test/e2e/app-dir/dynamic/app/dynamic/async-client/page.js
@@ -0,0 +1,15 @@
+'use client'
+
+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" />
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/dynamic/dynamic.test.ts b/test/e2e/app-dir/dynamic/dynamic.test.ts
@@ -33,19 +33,10 @@ describe('app dir - next/dynamic', () => {
     expect(serverContent).toContain('next-dynamic dynamic on client')
     expect(serverContent).toContain('next-dynamic server import client')
     expect(serverContent).not.toContain('next-dynamic dynamic no ssr on client')
-
-    // expect(serverContent).not.toContain('next-dynamic dynamic no ssr on server')
-
-    // client component under server component with ssr: false will not be rendered either in flight or SSR
-    // expect($.html()).not.toContain('client component under sever no ssr')
   })
 
   it('should handle next/dynamic in hydration correctly', async () => {
-    const selector = 'body div'
     const browser = await next.browser('/dynamic')
-    const clientContent = await browser.elementByCss(selector).text()
-    // expect(clientContent).toContain('next-dynamic dynamic no ssr on server')
-    // expect(clientContent).toContain('client component under sever no ssr')
     await browser.waitForElementByCss('#css-text-dynamic-no-ssr-client')
 
     expect(
@@ -127,9 +118,6 @@ describe('app dir - next/dynamic', () => {
       )
       // noSSR should not show up in browser
       const browser = await next.browser('/dynamic-mixed-ssr-false/client')
-      // expect(
-      //   await browser.elementByCss('#ssr-false-server-module').text()
-      // ).toBe('ssr-false-server-module-text')
       expect(
         await browser.elementByCss('#ssr-false-client-module').text()
       ).toBe('ssr-false-client-module-text')
@@ -139,7 +127,6 @@ describe('app dir - next/dynamic', () => {
         const pageServerChunk = await next.readFile(
           '.next/server/app/dynamic-mixed-ssr-false/client/page.js'
         )
-        // expect(pageServerChunk).not.toContain('ssr-false-server-module-text')
         expect(pageServerChunk).not.toContain('ssr-false-client-module-text')
       }
     })

diff --git a/test/integration/next-image-new/app-dir/app/dynamic-static-img/async-image.js b/test/integration/next-image-new/app-dir/app/dynamic-static-img/async-image.js
@@ -0,0 +1,10 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+export const DynamicStaticImg = dynamic(
+  () => import('../../components/static-img'),
+  {
+    ssr: false,
+  }
+)
diff --git a/test/integration/next-image-new/app-dir/app/dynamic-static-img/page.js b/test/integration/next-image-new/app-dir/app/dynamic-static-img/page.js
@@ -1,8 +1,4 @@
-import dynamic from 'next/dynamic'
-
-const DynamicStaticImg = dynamic(() => import('../../components/static-img'), {
-  ssr: false,
-})
+import { DynamicStaticImg } from './async-image'
 
 export default () => {
   return (