Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[assert helpers] ServerIntegration tests #31988

Merged
merged 3 commits into from
Jan 6, 2025
+1,501 −788
Merged

[assert helpers] ServerIntegration tests #31988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f67863c
[tests] fix hidden use() warnings
rickhanlonii Jan 6, 2025
c5e705f
[assert helpers] react-reconciler
rickhanlonii Jan 6, 2025
facf8cf
[assert helpers] ServerIntegration tests
rickhanlonii Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 18 additions & 8 deletions packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ let React;
let ReactDOM;
let ReactDOMClient;
let ReactDOMServer;
let assertConsoleErrorDev;

function initModules() {
// Reset warning cache.
Expand All @@ -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 {
Expand All @@ -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 () {
Expand Down Expand Up @@ -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(<nonstandard />);
});
}).toErrorDev('The tag <nonstandard> is unrecognized in this browser.');
ReactDOM.flushSync(() => {
const root = ReactDOMClient.createRoot(document.createElement('div'));
root.render(<nonstandard />);
});
assertConsoleErrorDev([
'The tag <nonstandard> 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(<nonstandard foo="bar" />);
expect(e.getAttribute('foo')).toBe('bar');
Expand Down
75 changes: 44 additions & 31 deletions packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,15 @@ let React;
let ReactDOM;
let ReactDOMClient;
let ReactDOMServer;
let assertConsoleErrorDev;

function initModules() {
jest.resetModules();
React = require('react');
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 {
Expand All @@ -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);
Expand Down Expand Up @@ -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(<nonstandard />);
});
}).toErrorDev('The tag <nonstandard> is unrecognized in this browser.');
ReactDOM.flushSync(() => {
const root = ReactDOMClient.createRoot(document.createElement('div'));
root.render(<nonstandard />);
});
assertConsoleErrorDev([
'The tag <nonstandard> 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(<nonstandard>Text</nonstandard>);
expect(e.tagName).toBe('NONSTANDARD');
Expand Down Expand Up @@ -984,16 +994,17 @@ describe('ReactDOMServerIntegration', () => {
'object',
async render => {
let EmptyComponent = {};
expect(() => {
EmptyComponent = <EmptyComponent />;
}).toErrorDev(
EmptyComponent = <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);
Expand All @@ -1010,14 +1021,15 @@ describe('ReactDOMServerIntegration', () => {
'null',
async render => {
let NullComponent = null;
expect(() => {
NullComponent = <NullComponent />;
}).toErrorDev(
NullComponent = <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);
Expand All @@ -1030,16 +1042,17 @@ describe('ReactDOMServerIntegration', () => {
'undefined',
async render => {
let UndefinedComponent = undefined;
expect(() => {
UndefinedComponent = <UndefinedComponent />;
}).toErrorDev(
UndefinedComponent = <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},
);

Expand Down
16 changes: 12 additions & 4 deletions packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ let PropTypes;
let React;
let ReactDOMClient;
let ReactDOMServer;
let assertConsoleErrorDev;

function initModules() {
// Reset warning cache.
Expand All @@ -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 {
Expand All @@ -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
Expand Down Expand Up @@ -344,12 +353,11 @@ describe('ReactDOMServerIntegration', () => {
}
}

expect(() => {
ReactDOMServer.renderToString(<MyComponent />);
}).toErrorDev(
ReactDOMServer.renderToString(<MyComponent />);
assertConsoleErrorDev([
'MyComponent.getChildContext(): childContextTypes must be defined in order to use getChildContext().\n' +
' in MyComponent (at **)',
);
]);
});
});
});
15 changes: 10 additions & 5 deletions packages/react-reconciler/src/__tests__/Activity-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ let startTransition;
let waitForPaint;
let waitFor;
let assertLog;
let assertConsoleErrorDev;

describe('Activity', () => {
beforeEach(() => {
Expand All @@ -37,6 +38,7 @@ describe('Activity', () => {
waitForPaint = InternalTestUtils.waitForPaint;
waitFor = InternalTestUtils.waitFor;
assertLog = InternalTestUtils.assertLog;
assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
});

function Text(props) {
Expand Down Expand Up @@ -784,11 +786,14 @@ describe('Activity', () => {
// would be null because it was nulled out when it was deleted, but there
// was no null check before we accessed it. A weird edge case but we must
// account for it.
expect(() => {
setState('Updated');
}).toErrorDev(
"Can't perform a React state update on a component that hasn't mounted yet",
);
setState('Updated');
assertConsoleErrorDev([
"Can't perform a React state update on a component that hasn't mounted yet. " +
'This indicates that you have a side-effect in your render function that ' +
'asynchronously later calls tries to update the component. ' +
'Move this work to useEffect instead.\n' +
' in Child (at **)',
]);
});
expect(root).toMatchRenderedOutput(null);
});
Expand Down
Loading
Loading