;
}
`
)
expect(didNotReload).toBe(true)
expect(await session.hasRedbox()).toBe(false)
expect(
await session.evaluate(() => document.querySelector('p').textContent)
).toBe('Hello')
await cleanup()
})
// https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/3#issuecomment-554137262
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
Default Export
;
}
}
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
Default Export
;
}
}
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
Default Export
;
}
}
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
;
}
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 ;
}
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()
})
// https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/3#issuecomment-554150098
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
}
`
)
// 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
}
`
)
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()
})
// https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/3#issuecomment-554152127
test('boundaries', async () => {
const { session, cleanup } = await sandbox(next)
await session.write(
'FunctionDefault.js',
`
export default function FunctionDefault() {
return
hello
}
`
)
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 (
error}>
);
}
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()
})
// TODO: investigate why this fails when running outside of the Next.js
// monorepo e.g. fails when using yarn create next-app
// https://github.com/vercel/next.js/pull/23203
test.skip('internal package errors', async () => {
const { session, cleanup } = await sandbox(next)
// Make a react build-time error.
await session.patch(
'index.js',
`
export default function FunctionNamed() {
return
{{}}
}`
)
expect(await session.hasRedbox(true)).toBe(true)
// We internally only check the script path, not including the line number
// and error message because the error comes from an external library.
// This test ensures that the errored script path is correctly resolved.
expect(await session.getRedboxSource()).toContain(
`../../../../packages/next/dist/pages/_document.js`
)
await cleanup()
})
test('unterminated JSX', async () => {
const { session, cleanup } = await sandbox(next)
await session.patch(
'index.js',
`
export default () => {
return (