next.js/test/development/acceptance-app/component-stack.test.ts at zt/sync-react · correasebastian/next.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/* eslint-env jest */
import { sandbox } from 'development-sandbox'
import { FileRef, nextTestSetup } from 'e2e-utils'
import path from 'path'

describe('Component Stack in error overlay', () => {
  const { next } = nextTestSetup({
    files: new FileRef(path.join(__dirname, 'fixtures', 'component-stack')),
    dependencies: {
      react: 'latest',
      'react-dom': 'latest',
    },
    skipStart: true,
  })

  it('should show a component stack on hydration error', async () => {
    const { cleanup, session } = await sandbox(next)

    await session.waitForAndOpenRuntimeError()

    // If it's too long we can collapse
    if (process.env.TURBOPACK) {
      expect(await session.getRedboxComponentStack()).toMatchInlineSnapshot(`
        "...
          <InnerLayoutRouter>
            <Mismatch>
              <main>
                <Component>
                  <div>
                    <p>
                      "server"
                      "client""
      `)

      await session.toggleCollapseComponentStack()
      expect(await session.getRedboxComponentStack()).toMatchInlineSnapshot(`
        "<Root>
          <ServerRoot>
            <AppRouter>
              <ErrorBoundary>
                <ErrorBoundaryHandler>
                  <Router>
                    <HotReload>
                      <ReactDevOverlay>
                        <DevRootNotFoundBoundary>
                          <NotFoundBoundary>
                            <NotFoundErrorBoundary>
                              <RedirectBoundary>
                                <RedirectErrorBoundary>
                                  <RootLayout>
                                    <html>
                                      <body>
                                        <OuterLayoutRouter>
                                          <RenderFromTemplateContext>
                                            <ScrollAndFocusHandler>
                                              <InnerScrollAndFocusHandler>
                                                <ErrorBoundary>
                                                  <LoadingBoundary>
                                                    <NotFoundBoundary>
                                                      <NotFoundErrorBoundary>
                                                        <RedirectBoundary>
                                                          <RedirectErrorBoundary>
                                                            <InnerLayoutRouter>
                                                              <Mismatch>
                                                                <main>
                                                                  <Component>
                                                                    <div>
                                                                      <p>
                                                                        "server"
                                                                        "client""
      `)
    } else {
      expect(await session.getRedboxComponentStack()).toMatchInlineSnapshot(`
        "<Mismatch>
          <main>
            <Component>
              <div>
                <p>
                  "server"
                  "client""
      `)
    }

    await cleanup()
  })
})