{"commit":{"authorEmail":"jackpope1@gmail.com","authoredAt":"2024-01-26T11:37:51-05:00","revision":"51c380d6ed303a54dad7b55258dd7aa8c6bb3fe1","authorName":"Jack Pope","shortRevision":"51c380d6ed","subject":"Use createRoot in ReactEmptyComponent-test (#28095)"},"parents":["763612647ceb66d95f728af896ca5e18a8181db8"],"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactEmptyComponent-test.js"}],"body":"","patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactEmptyComponent-test.js b\/packages\/react-dom\/src\/__tests__\/ReactEmptyComponent-test.js\nindex 93bc493140..9316ad4392 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactEmptyComponent-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactEmptyComponent-test.js\n@@ -11,10 +11,13 @@\n \n let React;\n let ReactDOM;\n-let ReactTestUtils;\n+let ReactDOMClient;\n let TogglingComponent;\n+let act;\n+let Scheduler;\n+let assertLog;\n \n-let log;\n+let container;\n \n describe('ReactEmptyComponent', () => {\n beforeEach(() => {\n@@ -22,20 +25,24 @@ describe('ReactEmptyComponent', () => {\n \n React = require('react');\n ReactDOM = require('react-dom');\n- ReactTestUtils = require('react-dom\/test-utils');\n+ ReactDOMClient = require('react-dom\/client');\n+ Scheduler = require('scheduler');\n+ const InternalTestUtils = require('internal-test-utils');\n+ act = InternalTestUtils.act;\n+ assertLog = InternalTestUtils.assertLog;\n \n- log = jest.fn();\n+ container = document.createElement('div');\n \n TogglingComponent = class extends React.Component {\n state = {component: this.props.firstComponent};\n \n componentDidMount() {\n- log(ReactDOM.findDOMNode(this));\n+ Scheduler.log('mount ' + ReactDOM.findDOMNode(this)?.nodeName);\n this.setState({component: this.props.secondComponent});\n }\n \n componentDidUpdate() {\n- log(ReactDOM.findDOMNode(this));\n+ Scheduler.log('update ' + ReactDOM.findDOMNode(this)?.nodeName);\n }\n \n render() {\n@@ -47,40 +54,44 @@ describe('ReactEmptyComponent', () => {\n \n describe.each([null, undefined])('when %s', nullORUndefined => {\n it('should not throw when rendering', () => {\n- class Component extends React.Component {\n- render() {\n- return nullORUndefined;\n- }\n+ function EmptyComponent() {\n+ return nullORUndefined;\n }\n \n- expect(function () {\n- ReactTestUtils.renderIntoDocument();\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ root.render();\n+ });\n }).not.toThrowError();\n });\n \n- it('should not produce child DOM nodes for nullish and false', () => {\n- class Component1 extends React.Component {\n- render() {\n- return nullORUndefined;\n- }\n+ it('should not produce child DOM nodes for nullish and false', async () => {\n+ function Component1() {\n+ return nullORUndefined;\n }\n \n- class Component2 extends React.Component {\n- render() {\n- return false;\n- }\n+ function Component2() {\n+ return false;\n }\n \n const container1 = document.createElement('div');\n- ReactDOM.render(, container1);\n+ const root1 = ReactDOMClient.createRoot(container1);\n+ await act(() => {\n+ root1.render();\n+ });\n expect(container1.children.length).toBe(0);\n \n const container2 = document.createElement('div');\n- ReactDOM.render(, container2);\n+ const root2 = ReactDOMClient.createRoot(container2);\n+ await act(() => {\n+ root2.render();\n+ });\n expect(container2.children.length).toBe(0);\n });\n \n- it('should be able to switch between rendering nullish and a normal tag', () => {\n+ it('should be able to switch between rendering nullish and a normal tag', async () => {\n const instance1 = (\n {\n \/>\n );\n \n- ReactTestUtils.renderIntoDocument(instance1);\n- ReactTestUtils.renderIntoDocument(instance2);\n-\n- expect(log).toHaveBeenCalledTimes(4);\n- expect(log).toHaveBeenNthCalledWith(1, null);\n- expect(log).toHaveBeenNthCalledWith(\n- 2,\n- expect.objectContaining({tagName: 'DIV'}),\n- );\n- expect(log).toHaveBeenNthCalledWith(\n- 3,\n- expect.objectContaining({tagName: 'DIV'}),\n- );\n- expect(log).toHaveBeenNthCalledWith(4, null);\n+ const container2 = document.createElement('div');\n+ const root1 = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root1.render(instance1);\n+ });\n+\n+ const root2 = ReactDOMClient.createRoot(container2);\n+ await act(() => {\n+ root2.render(instance2);\n+ });\n+\n+ assertLog([\n+ 'mount undefined',\n+ 'update DIV',\n+ 'mount DIV',\n+ 'update undefined',\n+ ]);\n });\n \n- it('should be able to switch in a list of children', () => {\n+ it('should be able to switch in a list of children', async () => {\n const instance1 = (\n {\n \/>\n );\n \n- ReactTestUtils.renderIntoDocument(\n-

\n- {instance1}\n- {instance1}\n- {instance1}\n- <\/div>,\n- );\n-\n- expect(log).toHaveBeenCalledTimes(6);\n- expect(log).toHaveBeenNthCalledWith(1, null);\n- expect(log).toHaveBeenNthCalledWith(2, null);\n- expect(log).toHaveBeenNthCalledWith(3, null);\n- expect(log).toHaveBeenNthCalledWith(\n- 4,\n- expect.objectContaining({tagName: 'DIV'}),\n- );\n- expect(log).toHaveBeenNthCalledWith(\n- 5,\n- expect.objectContaining({tagName: 'DIV'}),\n- );\n- expect(log).toHaveBeenNthCalledWith(\n- 6,\n- expect.objectContaining({tagName: 'DIV'}),\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+

\n+ {instance1}\n+ {instance1}\n+ {instance1}\n+ <\/div>,\n+ );\n+ });\n+\n+ assertLog([\n+ 'mount undefined',\n+ 'mount undefined',\n+ 'mount undefined',\n+ 'update DIV',\n+ 'update DIV',\n+ 'update DIV',\n+ ]);\n });\n \n it('should distinguish between a script placeholder and an actual script tag', () => {\n@@ -158,40 +167,39 @@ describe('ReactEmptyComponent', () => {\n \/>\n );\n \n- expect(function () {\n- ReactTestUtils.renderIntoDocument(instance1);\n+ const root1 = ReactDOMClient.createRoot(container);\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ root1.render(instance1);\n+ });\n }).not.toThrow();\n- expect(function () {\n- ReactTestUtils.renderIntoDocument(instance2);\n+\n+ const container2 = document.createElement('div');\n+ const root2 = ReactDOMClient.createRoot(container2);\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ root2.render(instance2);\n+ });\n }).not.toThrow();\n \n- expect(log).toHaveBeenCalledTimes(4);\n- expect(log).toHaveBeenNthCalledWith(1, null);\n- expect(log).toHaveBeenNthCalledWith(\n- 2,\n- expect.objectContaining({tagName: 'SCRIPT'}),\n- );\n- expect(log).toHaveBeenNthCalledWith(\n- 3,\n- expect.objectContaining({tagName: 'SCRIPT'}),\n- );\n- expect(log).toHaveBeenNthCalledWith(4, null);\n+ assertLog([\n+ 'mount undefined',\n+ 'update SCRIPT',\n+ 'mount SCRIPT',\n+ 'update undefined',\n+ ]);\n });\n \n it(\n 'should have findDOMNode return null when multiple layers of composite ' +\n 'components render to the same nullish placeholder',\n () => {\n- class GrandChild extends React.Component {\n- render() {\n- return nullORUndefined;\n- }\n+ function GrandChild() {\n+ return nullORUndefined;\n }\n \n- class Child extends React.Component {\n- render() {\n- return ;\n- }\n+ function Child() {\n+ return ;\n }\n \n const instance1 = (\n@@ -201,29 +209,32 @@ describe('ReactEmptyComponent', () => {\n \n );\n \n- expect(function () {\n- ReactTestUtils.renderIntoDocument(instance1);\n+ const root1 = ReactDOMClient.createRoot(container);\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ root1.render(instance1);\n+ });\n }).not.toThrow();\n- expect(function () {\n- ReactTestUtils.renderIntoDocument(instance2);\n+\n+ const container2 = document.createElement('div');\n+ const root2 = ReactDOMClient.createRoot(container2);\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ root2.render(instance2);\n+ });\n }).not.toThrow();\n \n- expect(log).toHaveBeenCalledTimes(4);\n- expect(log).toHaveBeenNthCalledWith(\n- 1,\n- expect.objectContaining({tagName: 'DIV'}),\n- );\n- expect(log).toHaveBeenNthCalledWith(2, null);\n- expect(log).toHaveBeenNthCalledWith(3, null);\n- expect(log).toHaveBeenNthCalledWith(\n- 4,\n- expect.objectContaining({tagName: 'DIV'}),\n- );\n+ assertLog([\n+ 'mount DIV',\n+ 'update undefined',\n+ 'mount undefined',\n+ 'update DIV',\n+ ]);\n },\n );\n \n- it('works when switching components', () => {\n- let assertions = 0;\n+ it('works when switching components', async () => {\n+ let innerRef;\n \n class Inner extends React.Component {\n render() {\n@@ -234,44 +245,51 @@ describe('ReactEmptyComponent', () => {\n \/\/ Make sure the DOM node resolves properly even if we're replacing a\n \/\/ `null` component\n expect(ReactDOM.findDOMNode(this)).not.toBe(null);\n- assertions++;\n }\n \n componentWillUnmount() {\n \/\/ Even though we're getting replaced by `null`, we haven't been\n \/\/ replaced yet!\n expect(ReactDOM.findDOMNode(this)).not.toBe(null);\n- assertions++;\n }\n }\n \n- class Wrapper extends React.Component {\n- render() {\n- return this.props.showInner ? : nullORUndefined;\n- }\n+ function Wrapper({showInner}) {\n+ innerRef = React.createRef(null);\n+ return showInner ? : nullORUndefined;\n }\n \n const el = document.createElement('div');\n- let component;\n \n \/\/ Render the component...\n- component = ReactDOM.render(, el);\n- expect(ReactDOM.findDOMNode(component)).not.toBe(null);\n+ const root = ReactDOMClient.createRoot(el);\n+ await act(() => {\n+ root.render();\n+ });\n+ expect(innerRef.current).not.toBe(null);\n \n \/\/ Switch to null...\n- component = ReactDOM.render(, el);\n- expect(ReactDOM.findDOMNode(component)).toBe(null);\n+ await act(() => {\n+ root.render();\n+ });\n+ expect(innerRef.current).toBe(null);\n \n \/\/ ...then switch back.\n- component = ReactDOM.render(, el);\n- expect(ReactDOM.findDOMNode(component)).not.toBe(null);\n+ await act(() => {\n+ root.render();\n+ });\n+ expect(innerRef.current).not.toBe(null);\n \n- expect(assertions).toBe(3);\n+ expect.assertions(6);\n });\n \n- it('can render nullish at the top level', () => {\n+ it('can render nullish at the top level', async () => {\n const div = document.createElement('div');\n- ReactDOM.render(nullORUndefined, div);\n+ const root = ReactDOMClient.createRoot(div);\n+\n+ await act(() => {\n+ root.render(nullORUndefined);\n+ });\n expect(div.innerHTML).toBe('');\n });\n \n@@ -308,26 +326,30 @@ describe('ReactEmptyComponent', () => {\n }\n }\n \n- expect(function () {\n- ReactTestUtils.renderIntoDocument();\n+ const root = ReactDOMClient.createRoot(container);\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ root.render();\n+ });\n }).not.toThrow();\n });\n \n- it('preserves the dom node during updates', () => {\n- class Empty extends React.Component {\n- render() {\n- return nullORUndefined;\n- }\n+ it('preserves the dom node during updates', async () => {\n+ function Empty() {\n+ return nullORUndefined;\n }\n \n- const container = document.createElement('div');\n-\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n const noscript1 = container.firstChild;\n expect(noscript1).toBe(null);\n \n \/\/ This update shouldn't create a DOM node\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n const noscript2 = container.firstChild;\n expect(noscript2).toBe(null);\n });\n@@ -338,8 +360,11 @@ describe('ReactEmptyComponent', () => {\n };\n const EmptyForwardRef = React.forwardRef(Empty);\n \n+ const root = ReactDOMClient.createRoot(container);\n expect(() => {\n- ReactTestUtils.renderIntoDocument();\n+ ReactDOM.flushSync(() => {\n+ root.render();\n+ });\n }).not.toThrowError();\n });\n \n@@ -349,8 +374,11 @@ describe('ReactEmptyComponent', () => {\n };\n const EmptyMemo = React.memo(Empty);\n \n+ const root = ReactDOMClient.createRoot(container);\n expect(() => {\n- ReactTestUtils.renderIntoDocument();\n+ ReactDOM.flushSync(() => {\n+ root.render();\n+ });\n }).not.toThrowError();\n });\n });\n"}

dillon1000/react

Files changed