{"commit":{"authorName":"Sebastian Silbermann","authoredAt":"2024-02-28T00:12:08+01:00","shortRevision":"e7849b50bc","subject":"Remove ReactTestUtils from ReactJSXElementValidator (#28335)","authorEmail":"silbermann.sebastian@gmail.com","revision":"e7849b50bcefc0742ca342d70284d82cfcf990e5"},"patch":"diff --git a\/packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js b\/packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js\nindex b34de9e67a..fb9dedb8b0 100644\n--- a\/packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js\n@@ -11,8 +11,9 @@\n \n \/\/ TODO: All these warnings should become static errors using Flow instead\n \/\/ of dynamic errors when using JSX with Flow.\n+let act;\n let React;\n-let ReactTestUtils;\n+let ReactDOMClient;\n \n describe('ReactJSXElementValidator', () => {\n let Component;\n@@ -21,8 +22,9 @@ describe('ReactJSXElementValidator', () => {\n beforeEach(() => {\n jest.resetModules();\n \n+ act = require('internal-test-utils').act;\n React = require('react');\n- ReactTestUtils = require('react-dom\/test-utils');\n+ ReactDOMClient = require('react-dom\/client');\n \n Component = class extends React.Component {\n render() {\n@@ -38,15 +40,18 @@ describe('ReactJSXElementValidator', () => {\n RequiredPropComponent.displayName = 'RequiredPropComponent';\n });\n \n- it('warns for keys for arrays of elements in children position', () => {\n- expect(() =>\n- ReactTestUtils.renderIntoDocument(\n- {[, ]}<\/Component>,\n- ),\n- ).toErrorDev('Each child in a list should have a unique \"key\" prop.');\n+ it('warns for keys for arrays of elements in children position', async () => {\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render({[, ]}<\/Component>);\n+ });\n+ }).toErrorDev('Each child in a list should have a unique \"key\" prop.');\n });\n \n- it('warns for keys for arrays of elements with owner info', () => {\n+ it('warns for keys for arrays of elements with owner info', async () => {\n class InnerComponent extends React.Component {\n render() {\n return {this.props.childSet}<\/Component>;\n@@ -59,16 +64,20 @@ describe('ReactJSXElementValidator', () => {\n }\n }\n \n- expect(() =>\n- ReactTestUtils.renderIntoDocument(),\n- ).toErrorDev(\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev([\n 'Each child in a list should have a unique \"key\" prop.' +\n '\\n\\nCheck the render method of `InnerComponent`. ' +\n 'It was passed a child from ComponentWrapper. ',\n- );\n+ ]);\n });\n \n- it('warns for keys for iterables of elements in rest args', () => {\n+ it('warns for keys for iterables of elements in rest args', async () => {\n const iterable = {\n '@@iterator': function () {\n let i = 0;\n@@ -81,18 +90,30 @@ describe('ReactJSXElementValidator', () => {\n },\n };\n \n- expect(() =>\n- ReactTestUtils.renderIntoDocument({iterable}<\/Component>),\n- ).toErrorDev('Each child in a list should have a unique \"key\" prop.');\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render({iterable}<\/Component>);\n+ });\n+ }).toErrorDev('Each child in a list should have a unique \"key\" prop.');\n });\n \n- it('does not warn for arrays of elements with keys', () => {\n- ReactTestUtils.renderIntoDocument(\n- {[, ]}<\/Component>,\n- );\n+ it('does not warn for arrays of elements with keys', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render(\n+ \n+ {[, ]}\n+ <\/Component>,\n+ );\n+ });\n });\n \n- it('does not warn for iterable elements with keys', () => {\n+ it('does not warn for iterable elements with keys', async () => {\n const iterable = {\n '@@iterator': function () {\n let i = 0;\n@@ -108,10 +129,15 @@ describe('ReactJSXElementValidator', () => {\n },\n };\n \n- ReactTestUtils.renderIntoDocument({iterable}<\/Component>);\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render({iterable}<\/Component>);\n+ });\n });\n \n- it('does not warn for numeric keys in entry iterable as a child', () => {\n+ it('does not warn for numeric keys in entry iterable as a child', async () => {\n const iterable = {\n '@@iterator': function () {\n let i = 0;\n@@ -125,23 +151,31 @@ describe('ReactJSXElementValidator', () => {\n };\n iterable.entries = iterable['@@iterator'];\n \n- ReactTestUtils.renderIntoDocument({iterable}<\/Component>);\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render({iterable}<\/Component>);\n+ });\n });\n \n- it('does not warn when the element is directly as children', () => {\n- ReactTestUtils.renderIntoDocument(\n- \n- \n- \n- <\/Component>,\n- );\n+ it('does not warn when the element is directly as children', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ \n+ <\/Component>,\n+ );\n+ });\n });\n \n it('does not warn when the child array contains non-elements', () => {\n void ({[{}, {}]}<\/Component>);\n });\n \n- it('should give context for errors in nested components.', () => {\n+ it('should give context for errors in nested components.', async () => {\n class MyComp extends React.Component {\n render() {\n return [

];\n@@ -152,7 +186,14 @@ describe('ReactJSXElementValidator', () => {\n return ;\n }\n }\n- expect(() => ReactTestUtils.renderIntoDocument()).toErrorDev(\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Each child in a list should have a unique \"key\" prop. ' +\n 'See https:\/\/reactjs.org\/link\/warning-keys for more information.\\n' +\n ' in MyComp (at **)\\n' +\n@@ -189,20 +230,26 @@ describe('ReactJSXElementValidator', () => {\n void (

);\n });\n \n- it('warns for fragments with illegal attributes', () => {\n+ it('warns for fragments with illegal attributes', async () => {\n class Foo extends React.Component {\n render() {\n return hello<\/React.Fragment>;\n }\n }\n \n- expect(() => ReactTestUtils.renderIntoDocument()).toErrorDev(\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +\n 'can only have `key` and `children` props.',\n );\n });\n \n- it('warns for fragments with refs', () => {\n+ it('warns for fragments with refs', async () => {\n class Foo extends React.Component {\n render() {\n return (\n@@ -217,35 +264,51 @@ describe('ReactJSXElementValidator', () => {\n }\n \n if (gate(flags => flags.enableRefAsProp)) {\n- expect(() => ReactTestUtils.renderIntoDocument()).toErrorDev(\n- 'Invalid prop `ref` supplied to `React.Fragment`.',\n- );\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev('Invalid prop `ref` supplied to `React.Fragment`.');\n } else {\n- expect(() => ReactTestUtils.renderIntoDocument()).toErrorDev(\n- 'Invalid attribute `ref` supplied to `React.Fragment`.',\n- );\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev('Invalid attribute `ref` supplied to `React.Fragment`.');\n }\n });\n \n- it('does not warn for fragments of multiple elements without keys', () => {\n- ReactTestUtils.renderIntoDocument(\n- <>\n- 1<\/span>\n- 2<\/span>\n- <\/>,\n- );\n- });\n-\n- it('warns for fragments of multiple elements with same key', () => {\n- expect(() =>\n- ReactTestUtils.renderIntoDocument(\n+ it('does not warn for fragments of multiple elements without keys', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n <>\n- 1<\/span>\n- 2<\/span>\n- 3<\/span>\n+ 1<\/span>\n+ 2<\/span>\n <\/>,\n- ),\n- ).toErrorDev('Encountered two children with the same key, `a`.', {\n+ );\n+ });\n+ });\n+\n+ it('warns for fragments of multiple elements with same key', async () => {\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ <>\n+ 1<\/span>\n+ 2<\/span>\n+ 3<\/span>\n+ <\/>,\n+ );\n+ });\n+ }).toErrorDev('Encountered two children with the same key, `a`.', {\n withoutStack: true,\n });\n });\n","files":[{"path":"packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js","status":"M"}],"parents":["d88fb321a3c5ccadb9d617364b6f50cb943765eb"],"body":""}

dillon1000/react

Files changed