From 35acd9b8f6f95cdd248c9c5c477256df06b4f294 Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Sun, 5 Jan 2025 23:58:04 -0500 Subject: [PATCH] [assert helpers] ServerIntegration tests --- ...eactDOMServerIntegrationAttributes-test.js | 26 +++++-- .../ReactDOMServerIntegrationElements-test.js | 75 +++++++++++-------- ...tDOMServerIntegrationLegacyContext-test.js | 16 +++- 3 files changed, 74 insertions(+), 43 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js index 7a52e9d0dd0a8..be5ff44b8cd12 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js @@ -16,6 +16,7 @@ let React; let ReactDOM; let ReactDOMClient; let ReactDOMServer; +let assertConsoleErrorDev; function initModules() { // Reset warning cache. @@ -24,6 +25,7 @@ function initModules() { ReactDOM = require('react-dom'); ReactDOMClient = require('react-dom/client'); ReactDOMServer = require('react-dom/server'); + assertConsoleErrorDev = require('internal-test-utils').assertConsoleErrorDev; // Make them available to the helpers. return { @@ -39,6 +41,13 @@ describe('ReactDOMServerIntegration', () => { beforeEach(() => { resetModules(); }); + afterEach(() => { + // TODO: This is a hack because expectErrors does not restore mock, + // however fixing it requires a major refactor to all these tests. + if (console.error.mockClear) { + console.error.mockRestore(); + } + }); describe('property to attribute mapping', function () { describe('string properties', function () { @@ -633,14 +642,15 @@ describe('ReactDOMServerIntegration', () => { // However this particular warning fires only when creating // DOM nodes on the client side. We force it to fire early // so that it gets deduplicated later, and doesn't fail the test. - expect(() => { - ReactDOM.flushSync(() => { - const root = ReactDOMClient.createRoot( - document.createElement('div'), - ); - root.render(); - }); - }).toErrorDev('The tag is unrecognized in this browser.'); + ReactDOM.flushSync(() => { + const root = ReactDOMClient.createRoot(document.createElement('div')); + root.render(); + }); + assertConsoleErrorDev([ + 'The tag is unrecognized in this browser. ' + + 'If you meant to render a React component, start its name with an uppercase letter.\n' + + ' in nonstandard (at **)', + ]); const e = await render(); expect(e.getAttribute('foo')).toBe('bar'); diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js index 0fcc314d39a05..50d189cc0860f 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js @@ -18,6 +18,7 @@ let React; let ReactDOM; let ReactDOMClient; let ReactDOMServer; +let assertConsoleErrorDev; function initModules() { jest.resetModules(); @@ -25,6 +26,7 @@ function initModules() { ReactDOM = require('react-dom'); ReactDOMClient = require('react-dom/client'); ReactDOMServer = require('react-dom/server'); + assertConsoleErrorDev = require('internal-test-utils').assertConsoleErrorDev; // Make them available to the helpers. return { @@ -48,6 +50,14 @@ describe('ReactDOMServerIntegration', () => { resetModules(); }); + afterEach(() => { + // TODO: This is a hack because expectErrors does not restore mock, + // however fixing it requires a major refactor to all these tests. + if (console.error.mockClear) { + console.error.mockRestore(); + } + }); + describe('elements and children', function () { function expectNode(node, type, value) { expect(node).not.toBe(null); @@ -134,15 +144,15 @@ describe('ReactDOMServerIntegration', () => { // However this particular warning fires only when creating // DOM nodes on the client side. We force it to fire early // so that it gets deduplicated later, and doesn't fail the test. - expect(() => { - ReactDOM.flushSync(() => { - const root = ReactDOMClient.createRoot( - document.createElement('div'), - ); - - root.render(); - }); - }).toErrorDev('The tag is unrecognized in this browser.'); + ReactDOM.flushSync(() => { + const root = ReactDOMClient.createRoot(document.createElement('div')); + root.render(); + }); + assertConsoleErrorDev([ + 'The tag is unrecognized in this browser. ' + + 'If you meant to render a React component, start its name with an uppercase letter.\n' + + ' in nonstandard (at **)', + ]); const e = await render(Text); expect(e.tagName).toBe('NONSTANDARD'); @@ -984,16 +994,17 @@ describe('ReactDOMServerIntegration', () => { 'object', async render => { let EmptyComponent = {}; - expect(() => { - EmptyComponent = ; - }).toErrorDev( + EmptyComponent = ; + assertConsoleErrorDev( gate(flags => flags.enableOwnerStacks) ? [] - : 'React.jsx: type is invalid -- expected a string ' + - '(for built-in components) or a class/function (for composite ' + - 'components) but got: object. You likely forgot to export your ' + - "component from the file it's defined in, or you might have mixed up " + - 'default and named imports.', + : [ + 'React.jsx: type is invalid -- expected a string ' + + '(for built-in components) or a class/function (for composite ' + + 'components) but got: object. You likely forgot to export your ' + + "component from the file it's defined in, or you might have mixed up " + + 'default and named imports.', + ], {withoutStack: true}, ); await render(EmptyComponent); @@ -1010,14 +1021,15 @@ describe('ReactDOMServerIntegration', () => { 'null', async render => { let NullComponent = null; - expect(() => { - NullComponent = ; - }).toErrorDev( + NullComponent = ; + assertConsoleErrorDev( gate(flags => flags.enableOwnerStacks) ? [] - : 'React.jsx: type is invalid -- expected a string ' + - '(for built-in components) or a class/function (for composite ' + - 'components) but got: null.', + : [ + 'React.jsx: type is invalid -- expected a string ' + + '(for built-in components) or a class/function (for composite ' + + 'components) but got: null.', + ], {withoutStack: true}, ); await render(NullComponent); @@ -1030,16 +1042,17 @@ describe('ReactDOMServerIntegration', () => { 'undefined', async render => { let UndefinedComponent = undefined; - expect(() => { - UndefinedComponent = ; - }).toErrorDev( + UndefinedComponent = ; + assertConsoleErrorDev( gate(flags => flags.enableOwnerStacks) ? [] - : 'React.jsx: type is invalid -- expected a string ' + - '(for built-in components) or a class/function (for composite ' + - 'components) but got: undefined. You likely forgot to export your ' + - "component from the file it's defined in, or you might have mixed up " + - 'default and named imports.', + : [ + 'React.jsx: type is invalid -- expected a string ' + + '(for built-in components) or a class/function (for composite ' + + 'components) but got: undefined. You likely forgot to export your ' + + "component from the file it's defined in, or you might have mixed up " + + 'default and named imports.', + ], {withoutStack: true}, ); diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js index 08551150a7a87..3fafff04170b7 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js @@ -16,6 +16,7 @@ let PropTypes; let React; let ReactDOMClient; let ReactDOMServer; +let assertConsoleErrorDev; function initModules() { // Reset warning cache. @@ -24,6 +25,7 @@ function initModules() { React = require('react'); ReactDOMClient = require('react-dom/client'); ReactDOMServer = require('react-dom/server'); + assertConsoleErrorDev = require('internal-test-utils').assertConsoleErrorDev; // Make them available to the helpers. return { @@ -43,6 +45,13 @@ describe('ReactDOMServerIntegration', () => { beforeEach(() => { resetModules(); }); + afterEach(() => { + // TODO: This is a hack because expectErrors does not restore mock, + // however fixing it requires a major refactor to all these tests. + if (console.error.mockClear) { + console.error.mockRestore(); + } + }); describe('legacy context', function () { // The `itRenders` test abstraction doesn't work with @gate so we have @@ -344,12 +353,11 @@ describe('ReactDOMServerIntegration', () => { } } - expect(() => { - ReactDOMServer.renderToString(); - }).toErrorDev( + ReactDOMServer.renderToString(); + assertConsoleErrorDev([ 'MyComponent.getChildContext(): childContextTypes must be defined in order to use getChildContext().\n' + ' in MyComponent (at **)', - ); + ]); }); }); });