Skip to content

Commit c14c6e0

Browse files
huozhihuozhi
authored
test: update test for async client component with snapshot (vercel#74550)
### What When there's a async client component used in the component tree, it's not available to display the component stack whether you enable react owner stack or not. It's likely a bug in `React.captureOwnerStack`. We update the existing test here to ensure the error is surfaced when the mistake is comitted. We also assert on the snapshots of component stack but leave it as a TODO now since the component stack of errored component (the async client component) is not displayed. Related to NDX-475
1 parent c527168 commit c14c6e0

7 files changed

Lines changed: 48 additions & 33 deletions

File tree

‎test/development/app-dir/error-overlay/async-client-component/app/client/page.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
'use client'
2+
3+
export default async function Page() {
4+
return <p id="app-router-client-component-value">hello</p>
5+
}

test/e2e/async-modules-app/app/layout.tsx renamed to test/development/app-dir/error-overlay/async-client-component/app/layout.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
1-
export const metadata = {
2-
title: 'Next.js',
3-
description: 'Generated by Next.js',
4-
}
5-
61
export default function RootLayout({
72
children,
83
}: {
94
children: React.ReactNode
105
}) {
116
return (
12-
<html lang="en">
7+
<html>
138
<body>{children}</body>
149
</html>
1510
)

test/e2e/async-modules-app/app/app-router/page.tsx renamed to test/development/app-dir/error-overlay/async-client-component/app/server/page.tsx

File renamed without changes.

‎test/development/app-dir/error-overlay/async-client-component/async-client-component.test.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/* eslint-env jest */
2+
import { nextTestSetup } from 'e2e-utils'
3+
import {
4+
assertNoRedbox,
5+
getRedboxDescription,
6+
getStackFramesContent,
7+
openRedbox,
8+
} from 'next-test-utils'
9+
10+
describe('app-dir - async-client-component', () => {
11+
const { next } = nextTestSetup({
12+
files: __dirname,
13+
})
14+
it('app router server component async module', async () => {
15+
const browser = await next.browser('/server')
16+
17+
await assertNoRedbox(browser)
18+
19+
expect(await browser.elementByCss('#app-router-value').text()).toBe('hello')
20+
})
21+
22+
it('app router client component async module', async () => {
23+
const browser = await next.browser('/client')
24+
25+
await openRedbox(browser)
26+
27+
const description = await getRedboxDescription(browser)
28+
const componentStack = await getStackFramesContent(browser)
29+
const result = {
30+
description,
31+
componentStack,
32+
}
33+
34+
// TODO(error): display component stack when react owner stack is available
35+
expect(result).toMatchInlineSnapshot(`
36+
{
37+
"componentStack": "",
38+
"description": "async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding \`'use client'\` to a module that was originally written for the server.",
39+
}
40+
`)
41+
})
42+
})

test/e2e/async-modules-app/next.config.js renamed to test/development/app-dir/error-overlay/async-client-component/next.config.js

File renamed without changes.

‎test/e2e/async-modules-app/app/app-router/client-component/skipped-page.tsx‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎test/e2e/async-modules-app/index.test.ts‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

0 commit comments

Comments
 (0)