[test] Add dedicated test for error when client functions are called from server components

Author: eps1lon

test/development/app-dir/source-mapping/app/server-client/client.js

@@ -0,0 +1,5 @@
+'use client'
+
+export function useClient() {
+  return 'client function'
+}

test/development/app-dir/source-mapping/app/server-client/page.js

@@ -0,0 +1,15 @@
+import { Suspense } from 'react'
+import { useClient } from './client'
+
+function Component() {
+  useClient()
+
+  return <p>Hello, Dave</p>
+}
+export default function Page() {
+  return (
+    <Suspense>
+      <Component />
+    </Suspense>
+  )
+}

test/development/app-dir/source-mapping/source-mapping.test.ts

@@ -1,8 +1,11 @@
 import { nextTestSetup } from 'e2e-utils'
 import { retry } from 'next-test-utils'
 
+const isCacheComponentsEnabled =
+  process.env.__NEXT_EXPERIMENTAL_CACHE_COMPONENTS === 'true'
+
 describe('source-mapping', () => {
-  const { next } = nextTestSetup({
+  const { isTurbopack, next } = nextTestSetup({
     files: __dirname,
   })
 
@@ -165,4 +168,41 @@ describe('source-mapping', () => {
       )
     })
   })
+
+  it('should show an error when client functions are called from server components', async () => {
+    const browser = await next.browser('/server-client')
+
+    // TODO(veil): Top stack should be ignore-listed
+    if (isTurbopack) {
+      await expect(browser).toDisplayRedbox(`
+       {
+         "description": "Attempted to call useClient() from the server but useClient is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
+         "environmentLabel": "${isCacheComponentsEnabled ? 'Prerender' : 'Server'}",
+         "label": "Runtime Error",
+         "source": "app/server-client/client.js/proxy.mjs (3:24) @ <anonymous>
+       > 3 |     function() { throw new Error("Attempted to call useClient() from the server but useClient is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component."); },
+           |                        ^",
+         "stack": [
+           "<anonymous> app/server-client/client.js/proxy.mjs (3:24)",
+           "Component app/server-client/page.js (5:12)",
+         ],
+       }
+      `)
+    } else {
+      await expect(browser).toDisplayRedbox(`
+       {
+         "description": "Attempted to call useClient() from the server but useClient is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
+         "environmentLabel": "${isCacheComponentsEnabled ? 'Prerender' : 'Server'}",
+         "label": "Runtime Error",
+         "source": "app/server-client/page.js (5:12) @ Component
+       > 5 |   useClient()
+           |            ^",
+         "stack": [
+           "<FIXME-file-protocol>",
+           "Component app/server-client/page.js (5:12)",
+         ],
+       }
+      `)
+    }
+  })
 })