vercel/next.js

  it('App shows "Hello world!"', () => {
    const app = shallow( /*#__PURE__*/React.createElement(App, null));
    expect(app.find('p').text()).to.equal('Hello World!');
  });

  test('can edit a component without losing state', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'index.js',
      `
        import { useCallback, useState } from 'react'

        export default function Index() {
          const [count, setCount] = useState(0)
          const increment = useCallback(() => setCount(c => c + 1), [setCount])
          return (
            <main>
              <p>{count}</p>
              <button onClick={increment}>Increment</button>
            </main>
          )
        }
      `
    )

    await session.evaluate(() => document.querySelector('button').click())
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('1')

    await session.patch(
      'index.js',
      `
        import { useCallback, useState } from 'react'

        export default function Index() {
          const [count, setCount] = useState(0)
          const increment = useCallback(() => setCount(c => c + 1), [setCount])
          return (
            <main>
              <p>Count: {count}</p>
              <button onClick={increment}>Increment</button>
            </main>
          )
        }
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Count: 1')
    await session.evaluate(() => document.querySelector('button').click())
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Count: 2')

    await cleanup()
  })

  test('cyclic dependencies', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.write(
      'NudgeOverview.js',
      `
        import * as React from 'react';

        import { foo } from './routes';

        const NudgeOverview = () => {
          return <span />;
          foo;
        };

        export default NudgeOverview;
      `
    )

    await session.write(
      'SurveyOverview.js',
      `
        const SurveyOverview = () => {
          return 100;
        };

        export default SurveyOverview;
      `
    )

    await session.write(
      'Milestones.js',
      `
        import React from 'react';

        import { fragment } from './DashboardPage';

        const Milestones = props => {
          return <span />;
          fragment;
        };

        export default Milestones;
      `
    )

    await session.write(
      'DashboardPage.js',
      `
        import React from 'react';

        import Milestones from './Milestones';
        import SurveyOverview from './SurveyOverview';
        import NudgeOverview from './NudgeOverview';

        export const fragment = {};

        const DashboardPage = () => {
          return (
            <>
              <Milestones />
              <SurveyOverview />
              <NudgeOverview />
            </>
          );
        };

        export default DashboardPage;
      `
    )

    await session.write(
      'routes.js',
      `
        import DashboardPage from './DashboardPage';

        export const foo = {};

        console.warn('DashboardPage at import time:', DashboardPage);
        setTimeout(() => console.warn('DashboardPage after:', DashboardPage), 0);

        export default DashboardPage;
      `
    )

    await session.patch(
      'index.js',
      `
        import * as React from 'react';

        import DashboardPage from './routes';

        const HeroApp = (props) => {
          return <p>Hello. {DashboardPage ? <DashboardPage /> : null}</p>;
        };

        export default HeroApp;
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Hello. 100')

    let didFullRefresh = !(await session.patch(
      'SurveyOverview.js',
      `
        const SurveyOverview = () => {
          return 200;
        };

        export default SurveyOverview;
      `
    ))

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Hello. 200')
    expect(didFullRefresh).toBe(false)

    didFullRefresh = !(await session.patch(
      'index.js',
      `
        import * as React from 'react';

        import DashboardPage from './routes';

        const HeroApp = (props) => {
          return <p>Hello: {DashboardPage ? <DashboardPage /> : null}</p>;
        };

        export default HeroApp;
      `
    ))

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Hello: 200')
    expect(didFullRefresh).toBe(false)

    didFullRefresh = !(await session.patch(
      'SurveyOverview.js',
      `
        const SurveyOverview = () => {
          return 300;
        };

        export default SurveyOverview;
      `
    ))

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Hello: 300')
    expect(didFullRefresh).toBe(false)

    await cleanup()
  })

  test('empty _app shows logbox', async () => {
    const { session, cleanup } = await sandbox(
      next,
      new Map([
        [
          'pages/_app.js',
          `
            
          `,
        ],
      ])
    )
    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
      `"Error: The default export is not a React Component in page: \\"/_app\\""`
    )

    await session.patch(
      'pages/_app.js',
      `
        function MyApp({ Component, pageProps }) {
          return <Component {...pageProps} />;
        }
        export default MyApp
      `
    )
    expect(await session.hasRedbox()).toBe(false)
    await cleanup()
  })

  test('empty _document shows logbox', async () => {
    const { session, cleanup } = await sandbox(
      next,
      new Map([
        [
          'pages/_document.js',
          `
            
          `,
        ],
      ])
    )
    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
      `"Error: The default export is not a React Component in page: \\"/_document\\""`
    )

    await session.patch(
      'pages/_document.js',
      `
        import Document, { Html, Head, Main, NextScript } from 'next/document'

        class MyDocument extends Document {
          static async getInitialProps(ctx) {
            const initialProps = await Document.getInitialProps(ctx)
            return { ...initialProps }
          }

          render() {
            return (
              <Html>
                <Head />
                <body>
                  <Main />
                  <NextScript />
                </body>
              </Html>
            )
          }
        }

        export default MyDocument
      `
    )
    expect(await session.hasRedbox()).toBe(false)
    await cleanup()
  })

  test('_app syntax error shows logbox', async () => {
    const { session, cleanup } = await sandbox(
      next,
      new Map([
        [
          'pages/_app.js',
          `
            function MyApp({ Component, pageProps }) {
              return <<Component {...pageProps} />;
            }
            export default MyApp
          `,
        ],
      ])
    )
    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxSource()).toMatchSnapshot()

    await session.patch(
      'pages/_app.js',
      `
        function MyApp({ Component, pageProps }) {
          return <Component {...pageProps} />;
        }
        export default MyApp
      `
    )
    expect(await session.hasRedbox()).toBe(false)
    await cleanup()
  })

  test('_document syntax error shows logbox', async () => {
    const { session, cleanup } = await sandbox(
      next,
      new Map([
        [
          'pages/_document.js',
          `
            import Document, { Html, Head, Main, NextScript } from 'next/document'

            class MyDocument extends Document {{
              static async getInitialProps(ctx) {
                const initialProps = await Document.getInitialProps(ctx)
                return { ...initialProps }
              }

              render() {
                return (
                  <Html>
                    <Head />
                    <body>
                      <Main />
                      <NextScript />
                    </body>
                  </Html>
                )
              }
            }

            export default MyDocument
          `,
        ],
      ])
    )
    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxSource()).toMatchSnapshot()

    await session.patch(
      'pages/_document.js',
      `
        import Document, { Html, Head, Main, NextScript } from 'next/document'

        class MyDocument extends Document {
          static async getInitialProps(ctx) {
            const initialProps = await Document.getInitialProps(ctx)
            return { ...initialProps }
          }

          render() {
            return (
              <Html>
                <Head />
                <body>
                  <Main />
                  <NextScript />
                </body>
              </Html>
            )
          }
        }

        export default MyDocument
      `
    )
    expect(await session.hasRedbox()).toBe(false)
    await cleanup()
  })

  test('Node.js builtins', async () => {
    const { session, cleanup } = await sandbox(
      next,
      new Map([
        [
          'node_modules/my-package/index.js',
          `
          const dns = require('dns')
          module.exports = dns
        `,
        ],
        [
          'node_modules/my-package/package.json',
          `
          {
            "name": "my-package",
            "version": "0.0.1"
          }
        `,
        ],
      ])
    )

    await session.patch(
      'index.js',
      `
      import pkg from 'my-package'

      export default function Hello() {
        return (pkg ? <h1>Package loaded</h1> : <h1>Package did not load</h1>)
      }
    `
    )
    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxSource()).toMatchSnapshot()

    await cleanup()
  })

  test('Module not found', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'index.js',
      `import Comp from 'b'
      export default function Oops() {
        return (
          <div>
            <Comp>lol</Comp>
          </div>
        )
      }
    `
    )

    expect(await session.hasRedbox(true)).toBe(true)

    const source = await session.getRedboxSource()
    expect(source).toMatchSnapshot()

    await cleanup()
  })

  test('Module not found (empty import trace)', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'pages/index.js',
      `import Comp from 'b'
      export default function Oops() {
        return (
          <div>
            <Comp>lol</Comp>
          </div>
        )
      }
    `
    )

    expect(await session.hasRedbox(true)).toBe(true)

    const source = await session.getRedboxSource()
    expect(source).toMatchSnapshot()

    await cleanup()
  })

  test('scss syntax errors', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.write('index.module.scss', `.button { font-size: 5px; }`)
    await session.patch(
      'index.js',
      `
        import './index.module.scss';
        export default () => {
          return (
            <div>
              <p>lol</p>
            </div>
          )
        }
      `
    )

    expect(await session.hasRedbox()).toBe(false)

    // Syntax error
    await session.patch('index.module.scss', `.button { font-size: :5px; }`)
    expect(await session.hasRedbox(true)).toBe(true)
    const source = await session.getRedboxSource()
    expect(source).toMatchSnapshot()

    // Not local error
    await session.patch('index.module.scss', `button { font-size: 5px; }`)
    expect(await session.hasRedbox(true)).toBe(true)
    const source2 = await session.getRedboxSource()
    expect(source2).toMatchSnapshot()

    await cleanup()
  })

  test('logbox: can recover from a syntax error without losing state', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'index.js',
      `
        import { useCallback, useState } from 'react'

        export default function Index() {
          const [count, setCount] = useState(0)
          const increment = useCallback(() => setCount(c => c + 1), [setCount])
          return (
            <main>
              <p>{count}</p>
              <button onClick={increment}>Increment</button>
            </main>
          )
        }
      `
    )

    await session.evaluate(() => document.querySelector('button').click())
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('1')

    await session.patch('index.js', `export default () => <div/`)

    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxSource()).toMatchSnapshot()

    await session.patch(
      'index.js',
      `
        import { useCallback, useState } from 'react'

        export default function Index() {
          const [count, setCount] = useState(0)
          const increment = useCallback(() => setCount(c => c + 1), [setCount])
          return (
            <main>
              <p>Count: {count}</p>
              <button onClick={increment}>Increment</button>
            </main>
          )
        }
      `
    )

    await check(
      () => session.evaluate(() => document.querySelector('p').textContent),
      /Count: 1/
    )

    expect(await session.hasRedbox()).toBe(false)

    await cleanup()
  })

  test('logbox: can recover from a event handler error', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'index.js',
      `
        import { useCallback, useState } from 'react'

        export default function Index() {
          const [count, setCount] = useState(0)
          const increment = useCallback(() => {
            setCount(c => c + 1)
            throw new Error('oops')
          }, [setCount])
          return (
            <main>
              <p>{count}</p>
              <button onClick={increment}>Increment</button>
            </main>
          )
        }
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('0')
    await session.evaluate(() => document.querySelector('button').click())
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('1')

    expect(await session.hasRedbox(true)).toBe(true)
    if (process.platform === 'win32') {
      expect(await session.getRedboxSource()).toMatchSnapshot()
    } else {
      expect(await session.getRedboxSource()).toMatchSnapshot()
    }

    await session.patch(
      'index.js',
      `
        import { useCallback, useState } from 'react'

        export default function Index() {
          const [count, setCount] = useState(0)
          const increment = useCallback(() => setCount(c => c + 1), [setCount])
          return (
            <main>
              <p>Count: {count}</p>
              <button onClick={increment}>Increment</button>
            </main>
          )
        }
      `
    )

    expect(await session.hasRedbox()).toBe(false)

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Count: 1')
    await session.evaluate(() => document.querySelector('button').click())
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Count: 2')

    expect(await session.hasRedbox()).toBe(false)

    await cleanup()
  })

  test('logbox: can recover from a component error', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.write(
      'child.js',
      `
        export default function Child() {
          return <p>Hello</p>;
        }
      `
    )

    await session.patch(
      'index.js',
      `
        import Child from './child'

        export default function Index() {
          return (
            <main>
              <Child />
            </main>
          )
        }
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Hello')

    await session.patch(
      'child.js',
      `
        // hello
        export default function Child() {
          throw new Error('oops')
        }
      `
    )

    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxSource()).toMatchSnapshot()

    const didNotReload = await session.patch(
      'child.js',
      `
        export default function Child() {
          return <p>Hello</p>;
        }
      `
    )

    expect(didNotReload).toBe(true)
    expect(await session.hasRedbox()).toBe(false)
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Hello')

    await cleanup()
  })

  test('render error not shown right after syntax error', async () => {
    const { session, cleanup } = await sandbox(next)

    // Starting here:
    await session.patch(
      'index.js',
      `
        import * as React from 'react';
        class ClassDefault extends React.Component {
          render() {
            return <h1>Default Export</h1>;
          }
        }

        export default ClassDefault;
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('h1').textContent)
    ).toBe('Default Export')

    // Break it with a syntax error:
    await session.patch(
      'index.js',
      `
        import * as React from 'react';

        class ClassDefault extends React.Component {
          render()
            return <h1>Default Export</h1>;
          }
        }

        export default ClassDefault;
      `
    )
    expect(await session.hasRedbox(true)).toBe(true)

    // Now change the code to introduce a runtime error without fixing the syntax error:
    await session.patch(
      'index.js',
      `
        import * as React from 'react';

        class ClassDefault extends React.Component {
          render()
            throw new Error('nooo');
            return <h1>Default Export</h1>;
          }
        }

        export default ClassDefault;
      `
    )
    expect(await session.hasRedbox(true)).toBe(true)

    // Now fix the syntax error:
    await session.patch(
      'index.js',
      `
        import * as React from 'react';

        class ClassDefault extends React.Component {
          render() {
            throw new Error('nooo');
            return <h1>Default Export</h1>;
          }
        }

        export default ClassDefault;
      `
    )
    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxSource()).toMatchSnapshot()

    await cleanup()
  })

  test('module init error not shown', async () => {
    // Start here:
    const { session, cleanup } = await sandbox(next)

    // We start here.
    await session.patch(
      'index.js',
      `
        import * as React from 'react';
        class ClassDefault extends React.Component {
          render() {
            return <h1>Default Export</h1>;
          }
        }
        export default ClassDefault;
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('h1').textContent)
    ).toBe('Default Export')

    // Add a throw in module init phase:
    await session.patch(
      'index.js',
      `
        // top offset for snapshot
        import * as React from 'react';
        throw new Error('no')
        class ClassDefault extends React.Component {
          render() {
            return <h1>Default Export</h1>;
          }
        }
        export default ClassDefault;
      `
    )

    expect(await session.hasRedbox(true)).toBe(true)
    if (process.platform === 'win32') {
      expect(await session.getRedboxSource()).toMatchSnapshot()
    } else {
      expect(await session.getRedboxSource()).toMatchSnapshot()
    }

    await cleanup()
  })

  test('stuck error', async () => {
    const { session, cleanup } = await sandbox(next)

    // We start here.
    await session.patch(
      'index.js',
      `
        import * as React from 'react';

        function FunctionDefault() {
          return <h1>Default Export Function</h1>;
        }

        export default FunctionDefault;
      `
    )

    // We add a new file. Let's call it Foo.js.
    await session.write(
      'Foo.js',
      `
        // intentionally skips export
        export default function Foo() {
          return React.createElement('h1', null, 'Foo');
        }
      `
    )

    // We edit our first file to use it.
    await session.patch(
      'index.js',
      `
        import * as React from 'react';
        import Foo from './Foo';
        function FunctionDefault() {
          return <Foo />;
        }
        export default FunctionDefault;
      `
    )

    // We get an error because Foo didn't import React. Fair.
    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxSource()).toMatchSnapshot()

    // Let's add that to Foo.
    await session.patch(
      'Foo.js',
      `
        import * as React from 'react';
        export default function Foo() {
          return React.createElement('h1', null, 'Foo');
        }
      `
    )

    // Expected: this fixes the problem
    expect(await session.hasRedbox()).toBe(false)

    await cleanup()
  })

  test('syntax > runtime error', async () => {
    const { session, cleanup } = await sandbox(next)

    // Start here.
    await session.patch(
      'index.js',
      `
        import * as React from 'react';

        export default function FunctionNamed() {
          return <div />
        }
      `
    )
    // TODO: this acts weird without above step
    await session.patch(
      'index.js',
      `
        import * as React from 'react';
        let i = 0
        setInterval(() => {
          i++
          throw Error('no ' + i)
        }, 1000)
        export default function FunctionNamed() {
          return <div />
        }
      `
    )

    await new Promise((resolve) => setTimeout(resolve, 1000))
    expect(await session.hasRedbox(true)).toBe(true)
    if (process.platform === 'win32') {
      expect(await session.getRedboxSource()).toMatchSnapshot()
    } else {
      expect(await session.getRedboxSource()).toMatchSnapshot()
    }

    // Make a syntax error.
    await session.patch(
      'index.js',
      `
        import * as React from 'react';
        let i = 0
        setInterval(() => {
          i++
          throw Error('no ' + i)
        }, 1000)
        export default function FunctionNamed() {`
    )

    await new Promise((resolve) => setTimeout(resolve, 1000))
    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxSource()).toMatchSnapshot()

    // Test that runtime error does not take over:
    await new Promise((resolve) => setTimeout(resolve, 2000))
    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxSource()).toMatchSnapshot()

    await cleanup()
  })

  test('boundaries', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.write(
      'FunctionDefault.js',
      `
        export default function FunctionDefault() {
          return <h2>hello</h2>
        }
      `
    )
    await session.patch(
      'index.js',
      `
        import FunctionDefault from './FunctionDefault.js'
        import * as React from 'react'
        class ErrorBoundary extends React.Component {
          constructor() {
            super()
            this.state = { hasError: false, error: null };
          }
          static getDerivedStateFromError(error) {
            return {
              hasError: true,
              error
            };
          }
          render() {
            if (this.state.hasError) {
              return this.props.fallback;
            }
            return this.props.children;
          }
        }
        function App() {
          return (
            <ErrorBoundary fallback={<h2>error</h2>}>
              <FunctionDefault />
            </ErrorBoundary>
          );
        }
        export default App;
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('h2').textContent)
    ).toBe('hello')

    await session.write(
      'FunctionDefault.js',
      `export default function FunctionDefault() { throw new Error('no'); }`
    )

    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxSource()).toMatchSnapshot()
    expect(
      await session.evaluate(() => document.querySelector('h2').textContent)
    ).toBe('error')

    await cleanup()
  })

  test.skip('internal package errors', async () => {

  test('unterminated JSX', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'index.js',
      `
        export default () => {
          return (
            <div>
              <p>lol</p>
            </div>
          )
        }
      `
    )

    expect(await session.hasRedbox()).toBe(false)

    await session.patch(
      'index.js',
      `
        export default () => {
          return (
            <div>
              <p>lol</p>
            div
          )
        }
      `
    )

    expect(await session.hasRedbox(true)).toBe(true)

    const source = await session.getRedboxSource()
    expect(source).toMatchSnapshot()

    await cleanup()
  })

  test('conversion to class component (1)', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.write(
      'Child.js',
      `
        export default function ClickCount() {
          return <p>hello</p>
        }
      `
    )

    await session.patch(
      'index.js',
      `
        import Child from './Child';

        export default function Home() {
          return (
            <div>
              <Child />
            </div>
          )
        }
      `
    )

    expect(await session.hasRedbox()).toBe(false)
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('hello')

    await session.patch(
      'Child.js',
      `
        import { Component } from 'react';
        export default class ClickCount extends Component {
          render() {
            throw new Error()
          }
        }
      `
    )

    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxSource()).toMatchSnapshot()

    await session.patch(
      'Child.js',
      `
      import { Component } from 'react';
        export default class ClickCount extends Component {
          render() {
            return <p>hello new</p>
          }
        }
      `
    )

    expect(await session.hasRedbox()).toBe(false)
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('hello new')

    await cleanup()
  })

  test('css syntax errors', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.write('index.module.css', `.button {}`)
    await session.patch(
      'index.js',
      `
        import './index.module.css';
        export default () => {
          return (
            <div>
              <p>lol</p>
            </div>
          )
        }
      `
    )

    expect(await session.hasRedbox()).toBe(false)

    // Syntax error
    await session.patch('index.module.css', `.button {`)
    expect(await session.hasRedbox(true)).toBe(true)
    const source = await session.getRedboxSource()
    expect(source).toMatch('./index.module.css:1:1')
    expect(source).toMatch('Syntax error: ')
    expect(source).toMatch('Unclosed block')
    expect(source).toMatch('> 1 | .button {')
    expect(source).toMatch('    | ^')

    // Not local error
    await session.patch('index.module.css', `button {}`)
    expect(await session.hasRedbox(true)).toBe(true)
    const source2 = await session.getRedboxSource()
    expect(source2).toMatchSnapshot()

    await cleanup()
  })

  test('logbox: anchors links in error messages', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'index.js',
      `
        import { useCallback } from 'react'

        export default function Index() {
          const boom = useCallback(() => {
            throw new Error('end http://nextjs.org')
          }, [])
          return (
            <main>
              <button onClick={boom}>Boom!</button>
            </main>
          )
        }
      `
    )

    expect(await session.hasRedbox()).toBe(false)
    await session.evaluate(() => document.querySelector('button').click())
    expect(await session.hasRedbox(true)).toBe(true)

    const header = await session.getRedboxDescription()
    expect(header).toMatchSnapshot()
    expect(
      await session.evaluate(
        () =>
          document
            .querySelector('body > nextjs-portal')
            .shadowRoot.querySelectorAll('#nextjs__container_errors_desc a')
            .length
      )
    ).toBe(1)
    expect(
      await session.evaluate(
        () =>
          (
            document
              .querySelector('body > nextjs-portal')
              .shadowRoot.querySelector(
                '#nextjs__container_errors_desc a:nth-of-type(1)'
              ) as any
          ).href
      )
    ).toMatchSnapshot()

    await session.patch(
      'index.js',
      `
        import { useCallback } from 'react'

        export default function Index() {
          const boom = useCallback(() => {
            throw new Error('http://nextjs.org start')
          }, [])
          return (
            <main>
              <button onClick={boom}>Boom!</button>
            </main>
          )
        }
      `
    )

    expect(await session.hasRedbox()).toBe(false)
    await session.evaluate(() => document.querySelector('button').click())
    expect(await session.hasRedbox(true)).toBe(true)

    const header2 = await session.getRedboxDescription()
    expect(header2).toMatchSnapshot()
    expect(
      await session.evaluate(
        () =>
          document
            .querySelector('body > nextjs-portal')
            .shadowRoot.querySelectorAll('#nextjs__container_errors_desc a')
            .length
      )
    ).toBe(1)
    expect(
      await session.evaluate(
        () =>
          (
            document
              .querySelector('body > nextjs-portal')
              .shadowRoot.querySelector(
                '#nextjs__container_errors_desc a:nth-of-type(1)'
              ) as any
          ).href
      )
    ).toMatchSnapshot()

    await session.patch(
      'index.js',
      `
        import { useCallback } from 'react'

        export default function Index() {
          const boom = useCallback(() => {
            throw new Error('middle http://nextjs.org end')
          }, [])
          return (
            <main>
              <button onClick={boom}>Boom!</button>
            </main>
          )
        }
      `
    )

    expect(await session.hasRedbox()).toBe(false)
    await session.evaluate(() => document.querySelector('button').click())
    expect(await session.hasRedbox(true)).toBe(true)

    const header3 = await session.getRedboxDescription()
    expect(header3).toMatchSnapshot()
    expect(
      await session.evaluate(
        () =>
          document
            .querySelector('body > nextjs-portal')
            .shadowRoot.querySelectorAll('#nextjs__container_errors_desc a')
            .length
      )
    ).toBe(1)
    expect(
      await session.evaluate(
        () =>
          (
            document
              .querySelector('body > nextjs-portal')
              .shadowRoot.querySelector(
                '#nextjs__container_errors_desc a:nth-of-type(1)'
              ) as any
          ).href
      )
    ).toMatchSnapshot()

    await session.patch(
      'index.js',
      `
        import { useCallback } from 'react'

        export default function Index() {
          const boom = useCallback(() => {
            throw new Error('multiple http://nextjs.org links http://example.com')
          }, [])
          return (
            <main>
              <button onClick={boom}>Boom!</button>
            </main>
          )
        }
      `
    )

    expect(await session.hasRedbox()).toBe(false)
    await session.evaluate(() => document.querySelector('button').click())
    expect(await session.hasRedbox(true)).toBe(true)

    const header4 = await session.getRedboxDescription()
    expect(header4).toMatchInlineSnapshot(
      `"Error: multiple http://nextjs.org links http://example.com"`
    )
    expect(
      await session.evaluate(
        () =>
          document
            .querySelector('body > nextjs-portal')
            .shadowRoot.querySelectorAll('#nextjs__container_errors_desc a')
            .length
      )
    ).toBe(2)
    expect(
      await session.evaluate(
        () =>
          (
            document
              .querySelector('body > nextjs-portal')
              .shadowRoot.querySelector(
                '#nextjs__container_errors_desc a:nth-of-type(1)'
              ) as any
          ).href
      )
    ).toMatchSnapshot()
    expect(
      await session.evaluate(
        () =>
          (
            document
              .querySelector('body > nextjs-portal')
              .shadowRoot.querySelector(
                '#nextjs__container_errors_desc a:nth-of-type(2)'
              ) as any
          ).href
      )
    ).toMatchSnapshot()

    await cleanup()
  })

  test('<Link> with multiple children', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'index.js',
      `
        import Link from 'next/link'

        export default function Index() {
          return (
            <Link href="/">
              <p>One</p>
              <p>Two</p>
            </Link>
          )
        }
      `
    )

    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
      `"Error: Multiple children were passed to <Link> with \`href\` of \`/\` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children"`
    )
    expect(
      await session.evaluate(
        () =>
          (
            document
              .querySelector('body > nextjs-portal')
              .shadowRoot.querySelector(
                '#nextjs__container_errors_desc a:nth-of-type(1)'
              ) as any
          ).href
      )
    ).toMatch('https://nextjs.org/docs/messages/link-multiple-children')

    await cleanup()
  })

  test('<Link> component props errors', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'index.js',
      `
        import Link from 'next/link'

        export default function Hello() {
          return <Link />
        }
      `
    )

    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
      `"Error: Failed prop type: The prop \`href\` expects a \`string\` or \`object\` in \`<Link>\`, but got \`undefined\` instead."`
    )

    await session.patch(
      'index.js',
      `
        import Link from 'next/link'

        export default function Hello() {
          return <Link href="/">Abc</Link>
        }
      `
    )
    expect(await session.hasRedbox()).toBe(false)

    await session.patch(
      'index.js',
      `
        import Link from 'next/link'

        export default function Hello() {
          return (
            <Link
              href="/"
              as="/"
              replace={false}
              scroll={false}
              shallow={false}
              passHref={false}
              prefetch={false}
            >
              Abc
            </Link>
          )
        }
      `
    )
    expect(await session.hasRedbox()).toBe(false)

    await session.patch(
      'index.js',
      `
        import Link from 'next/link'

        export default function Hello() {
          return (
            <Link
              href="/"
              as="/"
              replace={true}
              scroll={true}
              shallow={true}
              passHref={true}
              prefetch={true}
            >
              Abc
            </Link>
          )
        }
      `
    )
    expect(await session.hasRedbox()).toBe(false)

    await session.patch(
      'index.js',
      `
        import Link from 'next/link'

        export default function Hello() {
          return (
            <Link
              href="/"
              as="/"
              replace={undefined}
              scroll={undefined}
              shallow={undefined}
              passHref={undefined}
              prefetch={undefined}
            >
              Abc
            </Link>
          )
        }
      `
    )
    expect(await session.hasRedbox()).toBe(false)

    await session.patch(
      'index.js',
      `
        import Link from 'next/link'

        export default function Hello() {
          return (
            <Link
              href="/"
              as="/"
              replace={undefined}
              scroll={'oops'}
              shallow={undefined}
              passHref={undefined}
              prefetch={undefined}
            >
              Abc
            </Link>
          )
        }
      `
    )
    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxDescription()).toMatchSnapshot()

    await session.patch(
      'index.js',
      `
        import Link from 'next/link'

        export default function Hello() {
          return (
            <Link
              href={false}
              as="/"
              replace={undefined}
              scroll={'oops'}
              shallow={undefined}
              passHref={undefined}
              prefetch={undefined}
            >
              Abc
            </Link>
          )
        }
      `
    )
    expect(await session.hasRedbox(true)).toBe(true)
    expect(await session.getRedboxDescription()).toMatchSnapshot()

    await cleanup()
  })

  test('server-side only compilation errors', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'pages/index.js',
      `
        import myLibrary from 'my-non-existent-library'
        export async function getStaticProps() {
          return {
            props: {
              result: myLibrary()
            }
          }
        }
        export default function Hello(props) {
          return <h1>{props.result}</h1>
        }
      `
    )

    expect(await session.hasRedbox(true)).toBe(true)
    await cleanup()
  })

  test('styled-components hydration mismatch', async () => {
    const files = new Map()
    files.set(
      'pages/_document.js',
      `
        import Document from 'next/document'
        import { ServerStyleSheet } from 'styled-components'

        export default class MyDocument extends Document {
          static async getInitialProps(ctx) {
            const sheet = new ServerStyleSheet()
            const originalRenderPage = ctx.renderPage

            try {
              ctx.renderPage = () =>
                originalRenderPage({
                  enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
                })

              const initialProps = await Document.getInitialProps(ctx)
              return {
                ...initialProps,
                styles: (
                  <>
                    {initialProps.styles}
                    {sheet.getStyleElement()}
                  </>
                ),
              }
            } finally {
              sheet.seal()
            }
          }
        }
      `
    )

    const { session, cleanup } = await sandbox(next, files)

    // We start here.
    await session.patch(
      'index.js',
      `
        import React from 'react'
        import styled from 'styled-components'

        const Title = styled.h1\`
          color: red;
          font-size: 50px;
        \`

        export default () => <Title>My page</Title>
      `
    )

    // Verify no hydration mismatch:
    expect(await session.hasRedbox()).toBe(false)

    await cleanup()
  })

  test('can fast refresh a page with getStaticProps', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'pages/index.js',
      `
        import { useCallback, useState } from 'react'

        export function getStaticProps() {
          return { props: { } }
        }

        export default function Index() {
          const [count, setCount] = useState(0)
          const increment = useCallback(() => setCount(c => c + 1), [setCount])
          return (
            <main>
              <p>{count}</p>
              <button onClick={increment}>Increment</button>
            </main>
          )
        }
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('0')
    await session.evaluate(() => document.querySelector('button').click())
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('1')

    await session.patch(
      'pages/index.js',
      `
        import { useCallback, useState } from 'react'

        export default function Index() {
          const [count, setCount] = useState(0)
          const increment = useCallback(() => setCount(c => c + 1), [setCount])
          return (
            <main>
              <p>Count: {count}</p>
              <button onClick={increment}>Increment</button>
            </main>
          )
        }
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Count: 1')
    await session.evaluate(() => document.querySelector('button').click())
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Count: 2')

    await cleanup()
  })

  test('can fast refresh a page with getServerSideProps', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'pages/index.js',
      `
        import { useCallback, useState } from 'react'

        export function getServerSideProps() {
          return { props: { } }
        }

        export default function Index() {
          const [count, setCount] = useState(0)
          const increment = useCallback(() => setCount(c => c + 1), [setCount])
          return (
            <main>
              <p>{count}</p>
              <button onClick={increment}>Increment</button>
            </main>
          )
        }
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('0')
    await session.evaluate(() => document.querySelector('button').click())
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('1')

    await session.patch(
      'pages/index.js',
      `
        import { useCallback, useState } from 'react'

        export default function Index() {
          const [count, setCount] = useState(0)
          const increment = useCallback(() => setCount(c => c + 1), [setCount])
          return (
            <main>
              <p>Count: {count}</p>
              <button onClick={increment}>Increment</button>
            </main>
          )
        }
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Count: 1')
    await session.evaluate(() => document.querySelector('button').click())
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Count: 2')

    await cleanup()
  })

  test('can fast refresh a page with config', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'pages/index.js',
      `
        import { useCallback, useState } from 'react'

        export const config = {}

        export default function Index() {
          const [count, setCount] = useState(0)
          const increment = useCallback(() => setCount(c => c + 1), [setCount])
          return (
            <main>
              <p>{count}</p>
              <button onClick={increment}>Increment</button>
            </main>
          )
        }
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('0')
    await session.evaluate(() => document.querySelector('button').click())
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('1')

    await session.patch(
      'pages/index.js',
      `
        import { useCallback, useState } from 'react'

        export default function Index() {
          const [count, setCount] = useState(0)
          const increment = useCallback(() => setCount(c => c + 1), [setCount])
          return (
            <main>
              <p>Count: {count}</p>
              <button onClick={increment}>Increment</button>
            </main>
          )
        }
      `
    )

    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Count: 1')
    await session.evaluate(() => document.querySelector('button').click())
    expect(
      await session.evaluate(() => document.querySelector('p').textContent)
    ).toBe('Count: 2')

    await cleanup()
  })

  test('shows an overlay for a server-side error', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'pages/index.js',
      `export default function () { throw new Error('pre boom'); }`
    )

    const didNotReload = await session.patch(
      'pages/index.js',
      `export default function () { throw new Error('boom'); }`
    )
    expect(didNotReload).toBe(false)

    expect(await session.hasRedbox(true)).toBe(true)

    const source = await session.getRedboxSource()
    expect(source.split(/\r?\n/g).slice(2).join('\n')).toMatchInlineSnapshot(`
      "> 1 | export default function () { throw new Error('boom'); }
          |                                   ^"
    `)

    await cleanup()
  })

  test('custom loader (mdx) should have Fast Refresh enabled', async () => {
    const files = new Map()
    files.set(
      'next.config.js',
      `
        const withMDX = require("@next/mdx")({
          extension: /\\.mdx?$/,
        });
        module.exports = withMDX({
          pageExtensions: ["js", "mdx"],
        });
      `
    )
    files.set('pages/index.mdx', `Hello World!`)

    const { session, cleanup } = await sandbox(next, files, false)
    expect(
      await session.evaluate(
        () => document.querySelector('#__next').textContent
      )
    ).toBe('Hello World!')

    let didNotReload = await session.patch('pages/index.mdx', `Hello Foo!`)
    expect(didNotReload).toBe(true)
    expect(await session.hasRedbox()).toBe(false)
    expect(
      await session.evaluate(
        () => document.querySelector('#__next').textContent
      )
    ).toBe('Hello Foo!')

    didNotReload = await session.patch('pages/index.mdx', `Hello Bar!`)
    expect(didNotReload).toBe(true)
    expect(await session.hasRedbox()).toBe(false)
    expect(
      await session.evaluate(
        () => document.querySelector('#__next').textContent
      )
    ).toBe('Hello Bar!')

    await cleanup()
  })

  test('re-runs accepted modules', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'index.js',
      `export default function Noop() { return null; };`
    )

    await session.write(
      './foo.js',
      `window.log.push('init FooV1'); require('./bar');`
    )
    await session.write(
      './bar.js',
      `window.log.push('init BarV1'); export default function Bar() { return null; };`
    )

    await session.evaluate(() => ((window as any).log = []))
    await session.patch(
      'index.js',
      `require('./foo'); export default function Noop() { return null; };`
    )
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init FooV1',
      'init BarV1',
    ])

    // We only edited Bar, and it accepted.
    // So we expect it to re-run alone.
    await session.evaluate(() => ((window as any).log = []))
    await session.patch(
      './bar.js',
      `window.log.push('init BarV2'); export default function Bar() { return null; };`
    )
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init BarV2',
    ])

    // We only edited Bar, and it accepted.
    // So we expect it to re-run alone.
    await session.evaluate(() => ((window as any).log = []))
    await session.patch(
      './bar.js',
      `window.log.push('init BarV3'); export default function Bar() { return null; };`
    )
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init BarV3',
    ])

    // TODO:
    // expect(Refresh.performReactRefresh).toHaveBeenCalled();
    // expect(Refresh.performFullRefresh).not.toHaveBeenCalled();

    await cleanup()
  })

  test('propagates a hot update to closest accepted module', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'index.js',
      `export default function Noop() { return null; };`
    )

    await session.write(
      './foo.js',
      `
      window.log.push('init FooV1');
      require('./bar');

      // Exporting a component marks it as auto-accepting.
      export default function Foo() {};
      `
    )

    await session.write('./bar.js', `window.log.push('init BarV1');`)

    await session.evaluate(() => ((window as any).log = []))
    await session.patch(
      'index.js',
      `require('./foo'); export default function Noop() { return null; };`
    )

    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init FooV1',
      'init BarV1',
    ])

    // We edited Bar, but it doesn't accept.
    // So we expect it to re-run together with Foo which does.
    await session.evaluate(() => ((window as any).log = []))
    await session.patch('./bar.js', `window.log.push('init BarV2');`)
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      // // FIXME: Metro order:
      // 'init BarV2',
      // 'init FooV1',
      'init FooV1',
      'init BarV2',
      // Webpack runs in this order because it evaluates modules parent down, not
      // child up. Parents will re-run child modules in the order that they're
      // imported from the parent.
    ])

    // We edited Bar, but it doesn't accept.
    // So we expect it to re-run together with Foo which does.
    await session.evaluate(() => ((window as any).log = []))
    await session.patch('./bar.js', `window.log.push('init BarV3');`)
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      // // FIXME: Metro order:
      // 'init BarV3',
      // 'init FooV1',
      'init FooV1',
      'init BarV3',
      // Webpack runs in this order because it evaluates modules parent down, not
      // child up. Parents will re-run child modules in the order that they're
      // imported from the parent.
    ])

    // We edited Bar so that it accepts itself.
    // We still re-run Foo because the exports of Bar changed.
    await session.evaluate(() => ((window as any).log = []))
    await session.patch(
      './bar.js',
      `
      window.log.push('init BarV3');
      // Exporting a component marks it as auto-accepting.
      export default function Bar() {};
      `
    )
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      // // FIXME: Metro order:
      // 'init BarV3',
      // 'init FooV1',
      'init FooV1',
      'init BarV3',
      // Webpack runs in this order because it evaluates modules parent down, not
      // child up. Parents will re-run child modules in the order that they're
      // imported from the parent.
    ])

    // Further edits to Bar don't re-run Foo.
    await session.evaluate(() => ((window as any).log = []))
    await session.patch(
      './bar.js',
      `
      window.log.push('init BarV4');
      export default function Bar() {};
      `
    )
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init BarV4',
    ])

    // TODO:
    // expect(Refresh.performReactRefresh).toHaveBeenCalled();
    // expect(Refresh.performFullRefresh).not.toHaveBeenCalled();

    await cleanup()
  })

  test('propagates hot update to all inverse dependencies', async () => {
    const { session, cleanup } = await sandbox(next)

    await session.patch(
      'index.js',
      `export default function Noop() { return null; };`
    )

    // This is the module graph:
    //        MiddleA*
    //     /            \
    // Root* - MiddleB*  - Leaf
    //     \
    //        MiddleC
    //
    // * - accepts update
    //
    // We expect that editing Leaf will propagate to
    // MiddleA and MiddleB both of which can handle updates.

    await session.write(
      'root.js',
      `
      window.log.push('init RootV1');

      import './middleA';
      import './middleB';
      import './middleC';

      export default function Root() {};
      `
    )
    await session.write(
      'middleA.js',
      `
      log.push('init MiddleAV1');

      import './leaf';

      export default function MiddleA() {};
      `
    )
    await session.write(
      'middleB.js',
      `
      log.push('init MiddleBV1');

      import './leaf';

      export default function MiddleB() {};
      `
    )
    // This one doesn't import leaf and also doesn't export a component (so it
    // doesn't accept updates).
    await session.write(
      'middleC.js',
      `log.push('init MiddleCV1'); export default {};`
    )

    // Doesn't accept its own updates; they will propagate.
    await session.write(
      'leaf.js',
      `log.push('init LeafV1'); export default {};`
    )

    // Bootstrap:
    await session.evaluate(() => ((window as any).log = []))
    await session.patch(
      'index.js',
      `require('./root'); export default function Noop() { return null; };`
    )

    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init LeafV1',
      'init MiddleAV1',
      'init MiddleBV1',
      'init MiddleCV1',
      'init RootV1',
    ])

    // We edited Leaf, but it doesn't accept.
    // So we expect it to re-run together with MiddleA and MiddleB which do.
    await session.evaluate(() => ((window as any).log = []))
    await session.patch(
      'leaf.js',
      `log.push('init LeafV2'); export default {};`
    )
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init LeafV2',
      'init MiddleAV1',
      'init MiddleBV1',
    ])

    // Let's try the same one more time.
    await session.evaluate(() => ((window as any).log = []))
    await session.patch(
      'leaf.js',
      `log.push('init LeafV3'); export default {};`
    )
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init LeafV3',
      'init MiddleAV1',
      'init MiddleBV1',
    ])

    // Now edit MiddleB. It should accept and re-run alone.
    await session.evaluate(() => ((window as any).log = []))
    await session.patch(
      'middleB.js',
      `
      log.push('init MiddleBV2');

      import './leaf';

      export default function MiddleB() {};
      `
    )
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init MiddleBV2',
    ])

    // Finally, edit MiddleC. It didn't accept so it should bubble to Root.
    await session.evaluate(() => ((window as any).log = []))

    await session.patch(
      'middleC.js',
      `log.push('init MiddleCV2'); export default {};`
    )
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init MiddleCV2',
      'init RootV1',
    ])

    // TODO:
    // expect(Refresh.performReactRefresh).toHaveBeenCalled()
    // expect(Refresh.performFullRefresh).not.toHaveBeenCalled()

    await cleanup()
  })

  test('runs dependencies before dependents', async () => {
    // TODO:
  })

  test('provides fresh value for module.exports in parents', async () => {
    // TODO:
  })

  test('provides fresh value for exports.* in parents', async () => {
    // TODO:
  })

  test('provides fresh value for ES6 named import in parents', async () => {
    // TODO:
  })

  test('provides fresh value for ES6 default import in parents', async () => {
    // TODO:
  })

  test('stops update propagation after module-level errors', async () => {
    // TODO:
  })

  test('can continue hot updates after module-level errors with module.exports', async () => {
    // TODO:
  })

  test('can continue hot updates after module-level errors with ES6 exports', async () => {
    // TODO:
  })

  test('does not accumulate stale exports over time', async () => {
    // TODO:
  })

  test('bails out if update bubbles to the root via the only path', async () => {
    // TODO:
  })

  test('bails out if the update bubbles to the root via one of the paths', async () => {
    // TODO:
  })

  test('propagates a module that stops accepting in next version', async () => {
    const { session, cleanup } = await sandbox(next)

    // Accept in parent
    await session.write(
      './foo.js',
      `;(typeof global !== 'undefined' ? global : window).log.push('init FooV1'); import './bar'; export default function Foo() {};`
    )
    // Accept in child
    await session.write(
      './bar.js',
      `;(typeof global !== 'undefined' ? global : window).log.push('init BarV1'); export default function Bar() {};`
    )

    // Bootstrap:
    await session.patch(
      'index.js',
      `;(typeof global !== 'undefined' ? global : window).log = []; require('./foo'); export default () => null;`
    )
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init BarV1',
      'init FooV1',
    ])

    let didFullRefresh = false
    // Verify the child can accept itself:
    await session.evaluate(() => ((window as any).log = []))
    didFullRefresh =
      didFullRefresh ||
      !(await session.patch(
        './bar.js',
        `window.log.push('init BarV1.1'); export default function Bar() {};`
      ))
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init BarV1.1',
    ])

    // Now let's change the child to *not* accept itself.
    // We'll expect that now the parent will handle the evaluation.
    await session.evaluate(() => ((window as any).log = []))
    didFullRefresh =
      didFullRefresh ||
      !(await session.patch(
        './bar.js',
        // It's important we still export _something_, otherwise webpack will
        // also emit an extra update to the parent module. This happens because
        // webpack converts the module from ESM to CJS, which means the parent
        // module must update how it "imports" the module (drops interop code).
        // TODO: propose that webpack interrupts the current update phase when
        // `module.hot.invalidate()` is called.
        `window.log.push('init BarV2'); export {};`
      ))
    // We re-run Bar and expect to stop there. However,
    // it didn't export a component, so we go higher.
    // We stop at Foo which currently _does_ export a component.
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      // Bar evaluates twice:
      // 1. To invalidate itself once it realizes it's no longer acceptable.
      // 2. As a child of Foo re-evaluating.
      'init BarV2',
      'init BarV2',
      'init FooV1',
    ])

    // Change it back so that the child accepts itself.
    await session.evaluate(() => ((window as any).log = []))
    didFullRefresh =
      didFullRefresh ||
      !(await session.patch(
        './bar.js',
        `window.log.push('init BarV2'); export default function Bar() {};`
      ))
    // Since the export list changed, we have to re-run both the parent
    // and the child.
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init BarV2',
      'init FooV1',
    ])

    // TODO:
    // expect(Refresh.performReactRefresh).toHaveBeenCalled();

    // expect(Refresh.performFullRefresh).not.toHaveBeenCalled();
    expect(didFullRefresh).toBe(false)

    // But editing the child alone now doesn't reevaluate the parent.
    await session.evaluate(() => ((window as any).log = []))
    didFullRefresh =
      didFullRefresh ||
      !(await session.patch(
        './bar.js',
        `window.log.push('init BarV3'); export default function Bar() {};`
      ))
    expect(await session.evaluate(() => (window as any).log)).toEqual([
      'init BarV3',
    ])

    // Finally, edit the parent in a way that changes the export.
    // It would still be accepted on its own -- but it's incompatible
    // with the past version which didn't have two exports.
    await session.evaluate(() => window.localStorage.setItem('init', ''))
    didFullRefresh =
      didFullRefresh ||
      !(await session.patch(
        './foo.js',
        `
        if (typeof window !== 'undefined' && window.localStorage) {
          window.localStorage.setItem('init', 'init FooV2')
        }
        export function Foo() {};
        export function FooFoo() {};`
      ))

    // Check that we attempted to evaluate, but had to fall back to full refresh.
    expect(
      await session.evaluate(() => window.localStorage.getItem('init'))
    ).toEqual('init FooV2')

    // expect(Refresh.performFullRefresh).toHaveBeenCalled();
    expect(didFullRefresh).toBe(true)

    await cleanup()
  })

  test('can replace a module before it is loaded', async () => {
    // TODO:
  })

      it('should load the page properly', async () => {
        const contactPagePath = join('pages', 'hmr', 'contact.js')
        const newContactPagePath = join('pages', 'hmr', '_contact.js')
        let browser
        try {
          browser = await webdriver(next.appPort, '/docs/hmr/contact')
          const text = await browser.elementByCss('p').text()
          expect(text).toBe('This is the contact page.')

          // Rename the file to mimic a deleted page
          await next.renameFile(contactPagePath, newContactPagePath)

          await check(
            () => getBrowserBodyText(browser),
            /This page could not be found/
          )

          // Rename the file back to the original filename
          await next.renameFile(newContactPagePath, contactPagePath)

          // wait until the page comes back
          await check(
            () => getBrowserBodyText(browser),
            /This is the contact page/
          )
        } finally {
          if (browser) {
            await browser.close()
          }
          await next
            .renameFile(newContactPagePath, contactPagePath)
            .catch(() => {})
        }
      })