[assert helpers] ServerIntegration tests (#31988)
Based off: https://github.com/facebook/react/pull/31986
Ricky committed
Jan 6, 2025 at 14:13 UTC
e0c893f51d6620ede7ad9a65102ac581da464680
3 files changed
+74
-43
packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
+18
-8
@@ -16,6 +16,7 @@ let React;
16
let ReactDOM;
17
let ReactDOMClient;
18
let ReactDOMServer;
19
+let assertConsoleErrorDev;
20
21
function initModules() {
22
// Reset warning cache.
@@ -24,6 +25,7 @@ function initModules() {
25
ReactDOM = require('react-dom');
26
ReactDOMClient = require('react-dom/client');
27
ReactDOMServer = require('react-dom/server');
28
+ assertConsoleErrorDev = require('internal-test-utils').assertConsoleErrorDev;
29
30
// Make them available to the helpers.
31
return {
@@ -39,6 +41,13 @@ describe('ReactDOMServerIntegration', () => {
41
beforeEach(() => {
42
resetModules();
43
});
44
+ afterEach(() => {
45
+ // TODO: This is a hack because expectErrors does not restore mock,
46
+ // however fixing it requires a major refactor to all these tests.
47
+ if (console.error.mockClear) {
48
+ console.error.mockRestore();
49
+ }
50
+ });
51
52
describe('property to attribute mapping', function () {
53
describe('string properties', function () {
@@ -633,14 +642,15 @@ describe('ReactDOMServerIntegration', () => {
642
// However this particular warning fires only when creating
643
// DOM nodes on the client side. We force it to fire early
644
// so that it gets deduplicated later, and doesn't fail the test.
636
- expect(() => {
637
- ReactDOM.flushSync(() => {
638
- const root = ReactDOMClient.createRoot(
639
- document.createElement('div'),
640
- );
641
- root.render(<nonstandard />);
642
- });
643
- }).toErrorDev('The tag <nonstandard> is unrecognized in this browser.');
645
+ ReactDOM.flushSync(() => {
646
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
647
+ root.render(<nonstandard />);
648
+ });
649
+ assertConsoleErrorDev([
650
+ 'The tag <nonstandard> is unrecognized in this browser. ' +
651
+ 'If you meant to render a React component, start its name with an uppercase letter.\n' +
652
+ ' in nonstandard (at **)',
653
+ ]);
654
655
const e = await render(<nonstandard foo="bar" />);
656
expect(e.getAttribute('foo')).toBe('bar');
packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
+44
-31
@@ -18,6 +18,7 @@ let React;
18
let ReactDOM;
19
let ReactDOMClient;
20
let ReactDOMServer;
21
+let assertConsoleErrorDev;
22
23
function initModules() {
24
jest.resetModules();
@@ -25,6 +26,7 @@ function initModules() {
26
ReactDOM = require('react-dom');
27
ReactDOMClient = require('react-dom/client');
28
ReactDOMServer = require('react-dom/server');
29
+ assertConsoleErrorDev = require('internal-test-utils').assertConsoleErrorDev;
30
31
// Make them available to the helpers.
32
return {
@@ -48,6 +50,14 @@ describe('ReactDOMServerIntegration', () => {
50
resetModules();
51
});
52
53
+ afterEach(() => {
54
+ // TODO: This is a hack because expectErrors does not restore mock,
55
+ // however fixing it requires a major refactor to all these tests.
56
+ if (console.error.mockClear) {
57
+ console.error.mockRestore();
58
+ }
59
+ });
60
+
61
describe('elements and children', function () {
62
function expectNode(node, type, value) {
63
expect(node).not.toBe(null);
@@ -134,15 +144,15 @@ describe('ReactDOMServerIntegration', () => {
144
// However this particular warning fires only when creating
145
// DOM nodes on the client side. We force it to fire early
146
// so that it gets deduplicated later, and doesn't fail the test.
137
- expect(() => {
138
- ReactDOM.flushSync(() => {
139
- const root = ReactDOMClient.createRoot(
140
- document.createElement('div'),
141
- );
142
-
143
- root.render(<nonstandard />);
144
- });
145
- }).toErrorDev('The tag <nonstandard> is unrecognized in this browser.');
147
+ ReactDOM.flushSync(() => {
148
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
149
+ root.render(<nonstandard />);
150
+ });
151
+ assertConsoleErrorDev([
152
+ 'The tag <nonstandard> is unrecognized in this browser. ' +
153
+ 'If you meant to render a React component, start its name with an uppercase letter.\n' +
154
+ ' in nonstandard (at **)',
155
+ ]);
156
157
const e = await render(<nonstandard>Text</nonstandard>);
158
expect(e.tagName).toBe('NONSTANDARD');
@@ -984,16 +994,17 @@ describe('ReactDOMServerIntegration', () => {
994
'object',
995
async render => {
996
let EmptyComponent = {};
987
- expect(() => {
988
- EmptyComponent = <EmptyComponent />;
989
- }).toErrorDev(
997
+ EmptyComponent = <EmptyComponent />;
998
+ assertConsoleErrorDev(
999
gate(flags => flags.enableOwnerStacks)
1000
? []
992
- : 'React.jsx: type is invalid -- expected a string ' +
993
- '(for built-in components) or a class/function (for composite ' +
994
- 'components) but got: object. You likely forgot to export your ' +
995
- "component from the file it's defined in, or you might have mixed up " +
996
- 'default and named imports.',
1001
+ : [
1002
+ 'React.jsx: type is invalid -- expected a string ' +
1003
+ '(for built-in components) or a class/function (for composite ' +
1004
+ 'components) but got: object. You likely forgot to export your ' +
1005
+ "component from the file it's defined in, or you might have mixed up " +
1006
+ 'default and named imports.',
1007
+ ],
1008
{withoutStack: true},
1009
);
1010
await render(EmptyComponent);
@@ -1010,14 +1021,15 @@ describe('ReactDOMServerIntegration', () => {
1021
'null',
1022
async render => {
1023
let NullComponent = null;
1013
- expect(() => {
1014
- NullComponent = <NullComponent />;
1015
- }).toErrorDev(
1024
+ NullComponent = <NullComponent />;
1025
+ assertConsoleErrorDev(
1026
gate(flags => flags.enableOwnerStacks)
1027
? []
1018
- : 'React.jsx: type is invalid -- expected a string ' +
1019
- '(for built-in components) or a class/function (for composite ' +
1020
- 'components) but got: null.',
1028
+ : [
1029
+ 'React.jsx: type is invalid -- expected a string ' +
1030
+ '(for built-in components) or a class/function (for composite ' +
1031
+ 'components) but got: null.',
1032
+ ],
1033
{withoutStack: true},
1034
);
1035
await render(NullComponent);
@@ -1030,16 +1042,17 @@ describe('ReactDOMServerIntegration', () => {
1042
'undefined',
1043
async render => {
1044
let UndefinedComponent = undefined;
1033
- expect(() => {
1034
- UndefinedComponent = <UndefinedComponent />;
1035
- }).toErrorDev(
1045
+ UndefinedComponent = <UndefinedComponent />;
1046
+ assertConsoleErrorDev(
1047
gate(flags => flags.enableOwnerStacks)
1048
? []
1038
- : 'React.jsx: type is invalid -- expected a string ' +
1039
- '(for built-in components) or a class/function (for composite ' +
1040
- 'components) but got: undefined. You likely forgot to export your ' +
1041
- "component from the file it's defined in, or you might have mixed up " +
1042
- 'default and named imports.',
1049
+ : [
1050
+ 'React.jsx: type is invalid -- expected a string ' +
1051
+ '(for built-in components) or a class/function (for composite ' +
1052
+ 'components) but got: undefined. You likely forgot to export your ' +
1053
+ "component from the file it's defined in, or you might have mixed up " +
1054
+ 'default and named imports.',
1055
+ ],
1056
{withoutStack: true},
1057
);
1058
packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js
+12
-4
@@ -16,6 +16,7 @@ let PropTypes;
16
let React;
17
let ReactDOMClient;
18
let ReactDOMServer;
19
+let assertConsoleErrorDev;
20
21
function initModules() {
22
// Reset warning cache.
@@ -24,6 +25,7 @@ function initModules() {
25
React = require('react');
26
ReactDOMClient = require('react-dom/client');
27
ReactDOMServer = require('react-dom/server');
28
+ assertConsoleErrorDev = require('internal-test-utils').assertConsoleErrorDev;
29
30
// Make them available to the helpers.
31
return {
@@ -43,6 +45,13 @@ describe('ReactDOMServerIntegration', () => {
45
beforeEach(() => {
46
resetModules();
47
});
48
+ afterEach(() => {
49
+ // TODO: This is a hack because expectErrors does not restore mock,
50
+ // however fixing it requires a major refactor to all these tests.
51
+ if (console.error.mockClear) {
52
+ console.error.mockRestore();
53
+ }
54
+ });
55
56
describe('legacy context', function () {
57
// The `itRenders` test abstraction doesn't work with @gate so we have
@@ -344,12 +353,11 @@ describe('ReactDOMServerIntegration', () => {
353
}
354
}
355
347
- expect(() => {
348
- ReactDOMServer.renderToString(<MyComponent />);
349
- }).toErrorDev(
356
+ ReactDOMServer.renderToString(<MyComponent />);
357
+ assertConsoleErrorDev([
358
'MyComponent.getChildContext(): childContextTypes must be defined in order to use getChildContext().\n' +
359
' in MyComponent (at **)',
352
- );
360
+ ]);
361
});
362
});
363
});