diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js index 2efcfd01d65..298cfd560c4 100644 --- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js @@ -23,6 +23,7 @@ function errorHandler() { describe('ReactDOMServerHydration', () => { let container; + let ownerStacks; beforeEach(() => { jest.resetModules(); @@ -32,7 +33,15 @@ describe('ReactDOMServerHydration', () => { act = React.act; window.addEventListener('error', errorHandler); - console.error = jest.fn(); + ownerStacks = []; + console.error = jest.fn(() => { + const ownerStack = React.captureOwnerStack(); + if (typeof ownerStack === 'string') { + ownerStacks.push(ownerStack === '' ? ' ' : ownerStack); + } else { + ownerStacks.push(' ' + String(ownerStack)); + } + }); container = document.createElement('div'); document.body.appendChild(container); }); @@ -44,15 +53,25 @@ describe('ReactDOMServerHydration', () => { }); function normalizeCodeLocInfo(str) { - return ( - typeof str === 'string' && - str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) { - return '\n in ' + name + ' (at **)'; - }) - ); + return typeof str === 'string' + ? str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) { + return '\n in ' + name + ' (at **)'; + }) + : str; } - function formatMessage(args) { + function formatMessage(args, index) { + const ownerStack = ownerStacks[index]; + + if (ownerStack === undefined) { + throw new Error( + 'Expected an owner stack for message ' + + index + + ':\n' + + util.format(...args), + ); + } + const [format, ...rest] = args; if (format instanceof Error) { if (format.cause instanceof Error) { @@ -61,13 +80,23 @@ describe('ReactDOMServerHydration', () => { format.message + ']\n Cause [' + format.cause.message + - ']' + ']\n Owner Stack:' + + normalizeCodeLocInfo(ownerStack) ); } - return 'Caught [' + format.message + ']'; + return ( + 'Caught [' + + format.message + + ']\n Owner Stack:' + + normalizeCodeLocInfo(ownerStack) + ); } rest[rest.length - 1] = normalizeCodeLocInfo(rest[rest.length - 1]); - return util.format(format, ...rest); + return ( + util.format(format, ...rest) + + '\n Owner Stack:' + + normalizeCodeLocInfo(ownerStack) + ); } function formatConsoleErrors() { @@ -115,7 +144,10 @@ describe('ReactDOMServerHydration', () => {
+ client - server - ]", + ] + Owner Stack: + in main (at **) + in Mismatch (at **)", ] `); } else { @@ -138,7 +170,8 @@ describe('ReactDOMServerHydration', () => {
+ client - server - ", + + Owner Stack: ", ] `); } @@ -177,7 +210,10 @@ describe('ReactDOMServerHydration', () => {
+ This markup contains an nbsp entity:   client text - This markup contains an nbsp entity:   server text - ]", + ] + Owner Stack: + in div (at **) + in Mismatch (at **)", ] `); } else { @@ -199,7 +235,8 @@ describe('ReactDOMServerHydration', () => {
+ This markup contains an nbsp entity:   client text - This markup contains an nbsp entity:   server text - ", + + Owner Stack: ", ] `); } @@ -245,7 +282,8 @@ describe('ReactDOMServerHydration', () => { - __html: "server" }} > - ", + + Owner Stack: ", ] `); }); @@ -286,7 +324,8 @@ describe('ReactDOMServerHydration', () => { + dir="ltr" - dir="rtl" > - ", + + Owner Stack: ", ] `); }); @@ -327,7 +366,8 @@ describe('ReactDOMServerHydration', () => { + dir="ltr" - dir={null} > - ", + + Owner Stack: ", ] `); }); @@ -368,7 +408,8 @@ describe('ReactDOMServerHydration', () => { + dir={null} - dir="rtl" > - ", + + Owner Stack: ", ] `); }); @@ -409,7 +450,8 @@ describe('ReactDOMServerHydration', () => { + dir={null} - dir="rtl" > - ", + + Owner Stack: ", ] `); }); @@ -449,7 +491,8 @@ describe('ReactDOMServerHydration', () => { + style={{opacity:1}} - style={{opacity:"0"}} > - ", + + Owner Stack: ", ] `); }); @@ -483,7 +526,10 @@ describe('ReactDOMServerHydration', () => {
+
- ]", + ] + Owner Stack: + in main (at **) + in Mismatch (at **)", ] `); }); @@ -518,7 +564,10 @@ describe('ReactDOMServerHydration', () => { +
-
... - ]", + ] + Owner Stack: + in header (at **) + in Mismatch (at **)", ] `); }); @@ -554,7 +603,10 @@ describe('ReactDOMServerHydration', () => { +
-