test: add case for handling invalid element

vercel · Oct 30, 2024 · faefe3e · faefe3e
1 parent 0169324
commit faefe3e
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 0 deletions.
diff --git a/test/development/app-dir/invalid-element-type/app/browser/browser-only.js b/test/development/app-dir/invalid-element-type/app/browser/browser-only.js
@@ -0,0 +1,11 @@
+'use client'
+
+import Foo from '../foo'
+
+export default function BrowserOnly() {
+  return (
+    <div>
+      <Foo />
+    </div>
+  )
+}
diff --git a/test/development/app-dir/invalid-element-type/app/browser/page.js b/test/development/app-dir/invalid-element-type/app/browser/page.js
@@ -0,0 +1,11 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+const BrowserOnly = dynamic(() => import('./browser-only'), {
+  ssr: false,
+})
+
+export default function Page() {
+  return <BrowserOnly />
+}
diff --git a/test/development/app-dir/invalid-element-type/app/foo.js b/test/development/app-dir/invalid-element-type/app/foo.js
diff --git a/test/development/app-dir/invalid-element-type/app/layout.tsx b/test/development/app-dir/invalid-element-type/app/layout.tsx
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/development/app-dir/invalid-element-type/app/rsc/page.js b/test/development/app-dir/invalid-element-type/app/rsc/page.js
@@ -0,0 +1,9 @@
+import Foo from '../foo'
+
+export default function Page() {
+  return (
+    <div>
+      <Foo />
+    </div>
+  )
+}
diff --git a/test/development/app-dir/invalid-element-type/app/ssr/page.js b/test/development/app-dir/invalid-element-type/app/ssr/page.js
@@ -0,0 +1,11 @@
+'use client'
+
+import Foo from '../foo'
+
+export default function Page() {
+  return (
+    <div>
+      <Foo />
+    </div>
+  )
+}
diff --git a/test/development/app-dir/invalid-element-type/invalid-element-type.test.ts b/test/development/app-dir/invalid-element-type/invalid-element-type.test.ts
@@ -0,0 +1,147 @@
+import { nextTestSetup } from 'e2e-utils'
+import { assertHasRedbox, getRedboxSource } from 'next-test-utils'
+
+async function getStackFramesContent(browser) {
+  const stackFrameElements = await browser.elementsByCss(
+    '[data-nextjs-call-stack-frame]'
+  )
+  const stackFramesContent = (
+    await Promise.all(
+      stackFrameElements.map(async (frame) => {
+        const functionNameEl = await frame.$('[data-nextjs-frame-expanded]')
+        const sourceEl = await frame.$('[data-has-source]')
+        const functionName = functionNameEl
+          ? await functionNameEl.innerText()
+          : ''
+        const source = sourceEl ? await sourceEl.innerText() : ''
+
+        if (!functionName) {
+          return ''
+        }
+        return `at ${functionName} (${source})`
+      })
+    )
+  )
+    .filter(Boolean)
+    .join('\n')
+
+  return stackFramesContent
+}
+
+describe('app-dir - invalid-element-type', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should catch invalid element from on client-only component', async () => {
+    const browser = await next.browser('/browser')
+
+    await assertHasRedbox(browser)
+    const source = await getRedboxSource(browser)
+
+    const stackFramesContent = await getStackFramesContent(browser)
+    if (process.env.TURBOPACK) {
+      expect(stackFramesContent).toMatchInlineSnapshot(
+        `"at Page (app/browser/page.js (10:10))"`
+      )
+      expect(source).toMatchInlineSnapshot(`
+        "app/browser/browser-only.js (8:7) @ BrowserOnly
+
+           6 |   return (
+           7 |     <div>
+        >  8 |       <Foo />
+             |       ^
+           9 |     </div>
+          10 |   )
+          11 | }"
+      `)
+    } else {
+      expect(stackFramesContent).toMatchInlineSnapshot(
+        `"at BrowserOnly (app/browser/page.js (10:11))"`
+      )
+      expect(source).toMatchInlineSnapshot(`
+        "app/browser/browser-only.js (8:8) @ Foo
+
+           6 |   return (
+           7 |     <div>
+        >  8 |       <Foo />
+             |        ^
+           9 |     </div>
+          10 |   )
+          11 | }"
+      `)
+    }
+  })
+
+  it('should catch invalid element from on rsc component', async () => {
+    const browser = await next.browser('/rsc')
+
+    await assertHasRedbox(browser)
+    const stackFramesContent = await getStackFramesContent(browser)
+    const source = await getRedboxSource(browser)
+
+    if (process.env.TURBOPACK) {
+      expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+      expect(source).toMatchInlineSnapshot(`
+        "app/rsc/page.js (6:7) @ Page
+
+          4 |   return (
+          5 |     <div>
+        > 6 |       <Foo />
+            |       ^
+          7 |     </div>
+          8 |   )
+          9 | }"
+      `)
+    } else {
+      expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+      expect(source).toMatchInlineSnapshot(`
+        "app/rsc/page.js (6:8) @ Foo
+
+          4 |   return (
+          5 |     <div>
+        > 6 |       <Foo />
+            |        ^
+          7 |     </div>
+          8 |   )
+          9 | }"
+      `)
+    }
+  })
+
+  it('should catch invalid element from on ssr client component', async () => {
+    const browser = await next.browser('/ssr')
+
+    await assertHasRedbox(browser)
+
+    const stackFramesContent = await getStackFramesContent(browser)
+    const source = await getRedboxSource(browser)
+    if (process.env.TURBOPACK) {
+      expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+      expect(source).toMatchInlineSnapshot(`
+        "app/ssr/page.js (8:7) @ Page
+
+           6 |   return (
+           7 |     <div>
+        >  8 |       <Foo />
+             |       ^
+           9 |     </div>
+          10 |   )
+          11 | }"
+      `)
+    } else {
+      expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+      expect(source).toMatchInlineSnapshot(`
+        "app/ssr/page.js (8:8) @ Foo
+
+           6 |   return (
+           7 |     <div>
+        >  8 |       <Foo />
+             |        ^
+           9 |     </div>
+          10 |   )
+          11 | }"
+      `)
+    }
+  })
+})
diff --git a/test/development/app-dir/invalid-element-type/next.config.js b/test/development/app-dir/invalid-element-type/next.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    reactOwnerStack: true,
+  },
+}
+
+module.exports = nextConfig