mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian MarkbågeandAndrew Clark
17806594cc
* Move createRoot/hydrateRoot to /client We want these APIs ideally to be imported separately from things you might use in arbitrary components (like flushSync). Those other methods are "isomorphic" to how the ReactDOM tree is rendered. Similar to hooks. E.g. importing flushSync into a component that only uses it on the client should ideally not also pull in the entry client implementation on the server. This also creates a nicer parity with /server where the roots are in a separate entry point. Unfortunately, I can't quite do this yet because we have some legacy APIs that we plan on removing (like findDOMNode) and we also haven't implemented flushSync using a flag like startTransition does yet. Another problem is that we currently encourage these APIs to be aliased by /profiling (or unstable_testing). In the future you don't have to alias them because you can just change your roots to just import those APIs and they'll still work with the isomorphic forms. Although we might also just use export conditions for them. For that all to work, I went with a different strategy for now where the real API is in / but it comes with a warning if you use it. If you instead import /client it disables the warning in a wrapper. That means that if you alias / then import /client that will inturn import the alias and it'll just work. In a future breaking changes (likely when we switch to ESM) we can just remove createRoot/hydrateRoot from / and move away from the aliasing strategy. * Update tests to import from react-dom/client * Fix fixtures * Update warnings * Add test for the warning * Update devtools * Change order of react-dom, react-dom/client alias I think the order matters here. The first one takes precedence. * Require react-dom through client so it can be aliased Co-authored-by: Andrew Clark <git@andrewclark.io>
1107 lines
32 KiB
JavaScript
1107 lines
32 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
describe('ReactDOMConsoleErrorReporting', () => {
|
|
let act;
|
|
let React;
|
|
let ReactDOM;
|
|
let ReactDOMClient;
|
|
|
|
let ErrorBoundary;
|
|
let NoError;
|
|
let container;
|
|
let windowOnError;
|
|
|
|
beforeEach(() => {
|
|
jest.resetModules();
|
|
act = require('jest-react').act;
|
|
React = require('react');
|
|
ReactDOM = require('react-dom');
|
|
ReactDOMClient = require('react-dom/client');
|
|
|
|
ErrorBoundary = class extends React.Component {
|
|
state = {error: null};
|
|
static getDerivedStateFromError(error) {
|
|
return {error};
|
|
}
|
|
render() {
|
|
if (this.state.error) {
|
|
return <h1>Caught: {this.state.error.message}</h1>;
|
|
}
|
|
return this.props.children;
|
|
}
|
|
};
|
|
NoError = function() {
|
|
return <h1>OK</h1>;
|
|
};
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
windowOnError = jest.fn();
|
|
window.addEventListener('error', windowOnError);
|
|
});
|
|
|
|
afterEach(() => {
|
|
document.body.removeChild(container);
|
|
window.removeEventListener('error', windowOnError);
|
|
});
|
|
|
|
describe('ReactDOMClient.createRoot', () => {
|
|
it('logs errors during event handlers', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
return (
|
|
<button
|
|
onClick={() => {
|
|
throw Error('Boom');
|
|
}}>
|
|
click me
|
|
</button>
|
|
);
|
|
}
|
|
|
|
const root = ReactDOMClient.createRoot(container);
|
|
act(() => {
|
|
root.render(<Foo />);
|
|
});
|
|
|
|
act(() => {
|
|
container.firstChild.dispatchEvent(
|
|
new MouseEvent('click', {
|
|
bubbles: true,
|
|
}),
|
|
);
|
|
});
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported because we're in a browser click event:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// This one is jsdom-only. Real browser deduplicates it.
|
|
// (In DEV, we have a nested event due to guarded callback.)
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported because we're in a browser click event:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// This one is jsdom-only. Real browser deduplicates it.
|
|
// (In DEV, we have a nested event due to guarded callback.)
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
} else {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported because we're in a browser click event:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported because we're in a browser click event:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
root.render(<NoError />);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([]);
|
|
}
|
|
});
|
|
|
|
it('logs render errors without an error boundary', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
throw Error('Boom');
|
|
}
|
|
|
|
const root = ReactDOMClient.createRoot(container);
|
|
expect(() => {
|
|
act(() => {
|
|
root.render(<Foo />);
|
|
});
|
|
}).toThrow('Boom');
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported due to guarded callback:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// This is only duplicated with createRoot
|
|
// because it retries once with a sync render.
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported due to the guarded callback:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// This is only duplicated with createRoot
|
|
// because it retries once with a sync render.
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// Addendum by React:
|
|
expect.stringContaining(
|
|
'The above error occurred in the <Foo> component',
|
|
),
|
|
],
|
|
]);
|
|
} else {
|
|
// The top-level error was caught with try/catch, and there's no guarded callback,
|
|
// so in production we don't see an error event.
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by React with no extra message:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
root.render(<NoError />);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([]);
|
|
}
|
|
});
|
|
|
|
it('logs render errors with an error boundary', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
throw Error('Boom');
|
|
}
|
|
|
|
const root = ReactDOMClient.createRoot(container);
|
|
act(() => {
|
|
root.render(
|
|
<ErrorBoundary>
|
|
<Foo />
|
|
</ErrorBoundary>,
|
|
);
|
|
});
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported due to guarded callback:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// This is only duplicated with createRoot
|
|
// because it retries once with a sync render.
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by jsdom due to the guarded callback:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// This is only duplicated with createRoot
|
|
// because it retries once with a sync render.
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// Addendum by React:
|
|
expect.stringContaining(
|
|
'The above error occurred in the <Foo> component',
|
|
),
|
|
],
|
|
]);
|
|
} else {
|
|
// The top-level error was caught with try/catch, and there's no guarded callback,
|
|
// so in production we don't see an error event.
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by React with no extra message:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
root.render(<NoError />);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([]);
|
|
}
|
|
});
|
|
|
|
it('logs layout effect errors without an error boundary', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
React.useLayoutEffect(() => {
|
|
throw Error('Boom');
|
|
}, []);
|
|
return null;
|
|
}
|
|
|
|
const root = ReactDOMClient.createRoot(container);
|
|
expect(() => {
|
|
act(() => {
|
|
root.render(<Foo />);
|
|
});
|
|
}).toThrow('Boom');
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported due to guarded callback:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported due to the guarded callback:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// Addendum by React:
|
|
expect.stringContaining(
|
|
'The above error occurred in the <Foo> component',
|
|
),
|
|
],
|
|
]);
|
|
} else {
|
|
// The top-level error was caught with try/catch, and there's no guarded callback,
|
|
// so in production we don't see an error event.
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by React with no extra message:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
root.render(<NoError />);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([]);
|
|
}
|
|
});
|
|
|
|
it('logs layout effect errors with an error boundary', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
React.useLayoutEffect(() => {
|
|
throw Error('Boom');
|
|
}, []);
|
|
return null;
|
|
}
|
|
|
|
const root = ReactDOMClient.createRoot(container);
|
|
act(() => {
|
|
root.render(
|
|
<ErrorBoundary>
|
|
<Foo />
|
|
</ErrorBoundary>,
|
|
);
|
|
});
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported due to guarded callback:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by jsdom due to the guarded callback:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// Addendum by React:
|
|
expect.stringContaining(
|
|
'The above error occurred in the <Foo> component',
|
|
),
|
|
],
|
|
]);
|
|
} else {
|
|
// The top-level error was caught with try/catch, and there's no guarded callback,
|
|
// so in production we don't see an error event.
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by React with no extra message:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
root.render(<NoError />);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([]);
|
|
}
|
|
});
|
|
|
|
it('logs passive effect errors without an error boundary', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
React.useEffect(() => {
|
|
throw Error('Boom');
|
|
}, []);
|
|
return null;
|
|
}
|
|
|
|
const root = ReactDOMClient.createRoot(container);
|
|
expect(() => {
|
|
act(() => {
|
|
root.render(<Foo />);
|
|
});
|
|
}).toThrow('Boom');
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported due to guarded callback:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported due to the guarded callback:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// Addendum by React:
|
|
expect.stringContaining(
|
|
'The above error occurred in the <Foo> component',
|
|
),
|
|
],
|
|
]);
|
|
} else {
|
|
// The top-level error was caught with try/catch, and there's no guarded callback,
|
|
// so in production we don't see an error event.
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by React with no extra message:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
root.render(<NoError />);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([]);
|
|
}
|
|
});
|
|
|
|
it('logs passive effect errors with an error boundary', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
React.useEffect(() => {
|
|
throw Error('Boom');
|
|
}, []);
|
|
return null;
|
|
}
|
|
|
|
const root = ReactDOMClient.createRoot(container);
|
|
act(() => {
|
|
root.render(
|
|
<ErrorBoundary>
|
|
<Foo />
|
|
</ErrorBoundary>,
|
|
);
|
|
});
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported due to guarded callback:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by jsdom due to the guarded callback:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// Addendum by React:
|
|
expect.stringContaining(
|
|
'The above error occurred in the <Foo> component',
|
|
),
|
|
],
|
|
]);
|
|
} else {
|
|
// The top-level error was caught with try/catch, and there's no guarded callback,
|
|
// so in production we don't see an error event.
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by React with no extra message:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
root.render(<NoError />);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([]);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe('ReactDOM.render', () => {
|
|
it('logs errors during event handlers', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
return (
|
|
<button
|
|
onClick={() => {
|
|
throw Error('Boom');
|
|
}}>
|
|
click me
|
|
</button>
|
|
);
|
|
}
|
|
|
|
act(() => {
|
|
ReactDOM.render(<Foo />, container);
|
|
});
|
|
|
|
act(() => {
|
|
container.firstChild.dispatchEvent(
|
|
new MouseEvent('click', {
|
|
bubbles: true,
|
|
}),
|
|
);
|
|
});
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported because we're in a browser click event:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// This one is jsdom-only. Real browser deduplicates it.
|
|
// (In DEV, we have a nested event due to guarded callback.)
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
[
|
|
// Reported because we're in a browser click event:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// This one is jsdom-only. Real browser deduplicates it.
|
|
// (In DEV, we have a nested event due to guarded callback.)
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
} else {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported because we're in a browser click event:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported because we're in a browser click event:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
ReactDOM.render(<NoError />, container);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
]);
|
|
}
|
|
});
|
|
|
|
it('logs render errors without an error boundary', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
throw Error('Boom');
|
|
}
|
|
|
|
expect(() => {
|
|
act(() => {
|
|
ReactDOM.render(<Foo />, container);
|
|
});
|
|
}).toThrow('Boom');
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported due to guarded callback:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
[
|
|
// Reported due to the guarded callback:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// Addendum by React:
|
|
expect.stringContaining(
|
|
'The above error occurred in the <Foo> component',
|
|
),
|
|
],
|
|
]);
|
|
} else {
|
|
// The top-level error was caught with try/catch, and there's no guarded callback,
|
|
// so in production we don't see an error event.
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by React with no extra message:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
ReactDOM.render(<NoError />, container);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
]);
|
|
}
|
|
});
|
|
|
|
it('logs render errors with an error boundary', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
throw Error('Boom');
|
|
}
|
|
|
|
act(() => {
|
|
ReactDOM.render(
|
|
<ErrorBoundary>
|
|
<Foo />
|
|
</ErrorBoundary>,
|
|
container,
|
|
);
|
|
});
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported due to guarded callback:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
[
|
|
// Reported by jsdom due to the guarded callback:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// Addendum by React:
|
|
expect.stringContaining(
|
|
'The above error occurred in the <Foo> component',
|
|
),
|
|
],
|
|
]);
|
|
} else {
|
|
// The top-level error was caught with try/catch, and there's no guarded callback,
|
|
// so in production we don't see an error event.
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by React with no extra message:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
ReactDOM.render(<NoError />, container);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
]);
|
|
}
|
|
});
|
|
|
|
it('logs layout effect errors without an error boundary', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
React.useLayoutEffect(() => {
|
|
throw Error('Boom');
|
|
}, []);
|
|
return null;
|
|
}
|
|
|
|
expect(() => {
|
|
act(() => {
|
|
ReactDOM.render(<Foo />, container);
|
|
});
|
|
}).toThrow('Boom');
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported due to guarded callback:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
[
|
|
// Reported due to the guarded callback:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// Addendum by React:
|
|
expect.stringContaining(
|
|
'The above error occurred in the <Foo> component',
|
|
),
|
|
],
|
|
]);
|
|
} else {
|
|
// The top-level error was caught with try/catch, and there's no guarded callback,
|
|
// so in production we don't see an error event.
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by React with no extra message:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
ReactDOM.render(<NoError />, container);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
]);
|
|
}
|
|
});
|
|
|
|
it('logs layout effect errors with an error boundary', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
React.useLayoutEffect(() => {
|
|
throw Error('Boom');
|
|
}, []);
|
|
return null;
|
|
}
|
|
|
|
act(() => {
|
|
ReactDOM.render(
|
|
<ErrorBoundary>
|
|
<Foo />
|
|
</ErrorBoundary>,
|
|
container,
|
|
);
|
|
});
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported due to guarded callback:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
[
|
|
// Reported by jsdom due to the guarded callback:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// Addendum by React:
|
|
expect.stringContaining(
|
|
'The above error occurred in the <Foo> component',
|
|
),
|
|
],
|
|
]);
|
|
} else {
|
|
// The top-level error was caught with try/catch, and there's no guarded callback,
|
|
// so in production we don't see an error event.
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by React with no extra message:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
ReactDOM.render(<NoError />, container);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
]);
|
|
}
|
|
});
|
|
|
|
it('logs passive effect errors without an error boundary', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
React.useEffect(() => {
|
|
throw Error('Boom');
|
|
}, []);
|
|
return null;
|
|
}
|
|
|
|
expect(() => {
|
|
act(() => {
|
|
ReactDOM.render(<Foo />, container);
|
|
});
|
|
}).toThrow('Boom');
|
|
|
|
if (__DEV__) {
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
// Reported due to guarded callback:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
[
|
|
// Reported due to the guarded callback:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// Addendum by React:
|
|
expect.stringContaining(
|
|
'The above error occurred in the <Foo> component',
|
|
),
|
|
],
|
|
]);
|
|
} else {
|
|
// The top-level error was caught with try/catch, and there's no guarded callback,
|
|
// so in production we don't see an error event.
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by React with no extra message:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
ReactDOM.render(<NoError />, container);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
]);
|
|
}
|
|
});
|
|
|
|
it('logs passive effect errors with an error boundary', () => {
|
|
spyOnDevAndProd(console, 'error');
|
|
|
|
function Foo() {
|
|
React.useEffect(() => {
|
|
throw Error('Boom');
|
|
}, []);
|
|
return null;
|
|
}
|
|
|
|
act(() => {
|
|
ReactDOM.render(
|
|
<ErrorBoundary>
|
|
<Foo />
|
|
</ErrorBoundary>,
|
|
container,
|
|
);
|
|
});
|
|
|
|
if (__DEV__) {
|
|
// Reported due to guarded callback:
|
|
expect(windowOnError.mock.calls).toEqual([
|
|
[
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
[
|
|
// Reported by jsdom due to the guarded callback:
|
|
expect.stringContaining('Error: Uncaught [Error: Boom]'),
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
[
|
|
// Addendum by React:
|
|
expect.stringContaining(
|
|
'The above error occurred in the <Foo> component',
|
|
),
|
|
],
|
|
]);
|
|
} else {
|
|
// The top-level error was caught with try/catch, and there's no guarded callback,
|
|
// so in production we don't see an error event.
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[
|
|
// Reported by React with no extra message:
|
|
expect.objectContaining({
|
|
message: 'Boom',
|
|
}),
|
|
],
|
|
]);
|
|
}
|
|
|
|
// Check next render doesn't throw.
|
|
windowOnError.mockReset();
|
|
console.error.calls.reset();
|
|
act(() => {
|
|
ReactDOM.render(<NoError />, container);
|
|
});
|
|
expect(container.textContent).toBe('OK');
|
|
expect(windowOnError.mock.calls).toEqual([]);
|
|
if (__DEV__) {
|
|
expect(console.error.calls.all().map(c => c.args)).toEqual([
|
|
[expect.stringContaining('ReactDOM.render is no longer supported')],
|
|
]);
|
|
}
|
|
});
|
|
});
|
|
});
|