Skip to content

Commit ae4a2e1

Browse files
committed
Update logbox tests
1 parent 8c62af4 commit ae4a2e1

File tree

1 file changed

+106
-54
lines changed

1 file changed

+106
-54
lines changed

test/development/acceptance-app/ReactRefreshLogBox.test.ts

Lines changed: 106 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -777,39 +777,24 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
777777
await cleanup()
778778
})
779779

780-
test.each([
781-
[
782-
'client',
783-
new Map([
784-
[
785-
'app/page.js',
786-
outdent`
787-
'use client'
788-
export default function Page() {
789-
if (typeof window !== 'undefined') {
790-
throw new Error('Client error')
791-
}
792-
return null
793-
}
794-
`,
795-
],
796-
]),
797-
],
798-
[
799-
'server',
780+
test('Call stack count for client error', async () => {
781+
const { session, browser, cleanup } = await sandbox(
782+
next,
800783
new Map([
801784
[
802785
'app/page.js',
803786
outdent`
804-
export default function Page() {
805-
throw new Error('Server error')
806-
}
807-
`,
787+
'use client'
788+
export default function Page() {
789+
if (typeof window !== 'undefined') {
790+
throw new Error('Client error')
791+
}
792+
return null
793+
}
794+
`,
808795
],
809-
]),
810-
],
811-
])('Call stack count is correct for %s error', async (_, fixture) => {
812-
const { session, browser, cleanup } = await sandbox(next, fixture)
796+
])
797+
)
813798

814799
await session.assertHasRedbox()
815800

@@ -832,6 +817,47 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
832817
await cleanup()
833818
})
834819

820+
test('Call stack for server error', async () => {
821+
const { session, browser, cleanup } = await sandbox(
822+
next,
823+
new Map([
824+
[
825+
'app/page.js',
826+
outdent`
827+
export default function Page() {
828+
throw new Error('Server error')
829+
}
830+
`,
831+
],
832+
])
833+
)
834+
835+
try {
836+
await session.assertHasRedbox()
837+
838+
// Should still show the errored line in source code
839+
const source = await session.getRedboxSource()
840+
expect(source).toContain('app/page.js')
841+
expect(source).toContain(`throw new Error('Server error')`)
842+
843+
await expect(
844+
browser.hasElementByCssSelector(
845+
'[data-nextjs-data-runtime-error-collapsed-action]'
846+
)
847+
).resolves.toEqual(false)
848+
849+
const stackFrameElements = await browser.elementsByCss(
850+
'[data-nextjs-call-stack-frame]'
851+
)
852+
const stackFrames = await Promise.all(
853+
stackFrameElements.map((f) => f.innerText())
854+
)
855+
expect(stackFrames).toEqual([])
856+
} finally {
857+
await cleanup()
858+
}
859+
})
860+
835861
test('should hide unrelated frames in stack trace with unknown anonymous calls', async () => {
836862
const { session, browser, cleanup } = await sandbox(
837863
next,
@@ -852,18 +878,38 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
852878
],
853879
])
854880
)
855-
await session.assertHasRedbox()
856-
await expandCallStack(browser)
857-
let callStackFrames = await browser.elementsByCss(
858-
'[data-nextjs-call-stack-frame]'
859-
)
860-
const text = (
861-
await Promise.all(callStackFrames.map((f) => f.innerText()))
862-
).join('')
863-
expect(text).not.toContain('<anonymous>')
864-
expect(text).toContain('app/page.js')
865881

866-
await cleanup()
882+
try {
883+
await session.assertHasRedbox()
884+
885+
// Should still show the errored line in source code
886+
const source = await session.getRedboxSource()
887+
expect(source).toContain('app/page.js')
888+
expect(source).toContain(
889+
`throw new Error("This is an error from an anonymous function")`
890+
)
891+
892+
await expect(
893+
browser.hasElementByCssSelector(
894+
'[data-nextjs-data-runtime-error-collapsed-action]'
895+
)
896+
).resolves.toEqual(false)
897+
898+
const stackFrameElements = await browser.elementsByCss(
899+
'[data-nextjs-call-stack-frame]'
900+
)
901+
const stackFrames = await Promise.all(
902+
stackFrameElements.map((f) => f.innerText())
903+
)
904+
expect(stackFrames).toEqual([
905+
outdent`
906+
Page
907+
app/page.js (5:5)
908+
`,
909+
])
910+
} finally {
911+
await cleanup()
912+
}
867913
})
868914

869915
test('should hide unrelated frames in stack trace with nodejs internal calls', async () => {
@@ -881,24 +927,30 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
881927
])
882928
)
883929

884-
await session.assertHasRedbox()
885-
await expandCallStack(browser)
886-
887-
// Should still show the errored line in source code
888-
const source = await session.getRedboxSource()
889-
expect(source).toContain('app/page.js')
890-
expect(source).toContain(`new URL("/", "invalid")`)
930+
try {
931+
await session.assertHasRedbox()
891932

892-
await expandCallStack(browser)
893-
const callStackFrames = await browser.elementsByCss(
894-
'[data-nextjs-call-stack-frame]'
895-
)
896-
const texts = await Promise.all(callStackFrames.map((f) => f.innerText()))
933+
// Should still show the errored line in source code
934+
const source = await session.getRedboxSource()
935+
expect(source).toContain('app/page.js')
936+
expect(source).toContain(`new URL("/", "invalid")`)
897937

898-
expect(texts.filter((t) => t.includes('node:internal'))).toHaveLength(0)
899-
expect(texts.filter((t) => t.includes('node:async_hooks'))).toHaveLength(0)
938+
await expect(
939+
browser.hasElementByCssSelector(
940+
'[data-nextjs-data-runtime-error-collapsed-action]'
941+
)
942+
).resolves.toEqual(false)
900943

901-
await cleanup()
944+
const stackFrameElements = await browser.elementsByCss(
945+
'[data-nextjs-call-stack-frame]'
946+
)
947+
const stackFrames = await Promise.all(
948+
stackFrameElements.map((f) => f.innerText())
949+
)
950+
expect(stackFrames).toEqual([])
951+
} finally {
952+
await cleanup()
953+
}
902954
})
903955

904956
test('Server component errors should open up in fullscreen', async () => {

0 commit comments

Comments
 (0)