{"body":"","files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMTextComponent-test.js","status":"M"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMTextComponent-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMTextComponent-test.js\nindex 419d312cbc..4ec6ba2c7d 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMTextComponent-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMTextComponent-test.js\n@@ -10,94 +10,99 @@\n 'use strict';\n \n let React;\n-let ReactDOM;\n+let ReactDOMClient;\n let ReactDOMServer;\n-\n-\/\/ In standard React, TextComponent keeps track of different Text templates\n-\/\/ using comments. However, in React Fiber, those comments are not outputted due\n-\/\/ to the way Fiber keeps track of the templates.\n-\/\/ This function \"Normalizes\" childNodes lists to avoid the presence of comments\n-\/\/ and make the child list identical in standard React and Fiber\n-function filterOutComments(nodeList) {\n- return [].slice.call(nodeList).filter(node => !(node instanceof Comment));\n-}\n+let act;\n \n describe('ReactDOMTextComponent', () => {\n beforeEach(() => {\n React = require('react');\n- ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n ReactDOMServer = require('react-dom\/server');\n+ act = require('internal-test-utils').act;\n });\n \n- it('updates a mounted text component in place', () => {\n- const el = document.createElement('div');\n- let inst = ReactDOM.render(\n-

\n- \n- {'foo'}\n- {'bar'}\n- <\/div>,\n- el,\n- );\n- let nodes = filterOutComments(inst.childNodes);\n+ it('updates a mounted text component in place', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+

\n+ \n+ {'foo'}\n+ {'bar'}\n+ <\/div>,\n+ );\n+ });\n+ let inst = container.firstChild;\n+ let nodes = inst.childNodes;\n \n const foo = nodes[1];\n const bar = nodes[2];\n expect(foo.data).toBe('foo');\n expect(bar.data).toBe('bar');\n \n- inst = ReactDOM.render(\n-

\n- \n- {'baz'}\n- {'qux'}\n- <\/div>,\n- el,\n- );\n+ await act(() => {\n+ root.render(\n+

\n+ \n+ {'baz'}\n+ {'qux'}\n+ <\/div>,\n+ );\n+ });\n+ inst = container.firstChild;\n \/\/ After the update, the text nodes should have stayed in place (as opposed\n \/\/ to getting unmounted and remounted)\n- nodes = filterOutComments(inst.childNodes);\n+ nodes = inst.childNodes;\n expect(nodes[1]).toBe(foo);\n expect(nodes[2]).toBe(bar);\n expect(foo.data).toBe('baz');\n expect(bar.data).toBe('qux');\n });\n \n- it('can be toggled in and out of the markup', () => {\n- const el = document.createElement('div');\n- let inst = ReactDOM.render(\n-

\n- {'foo'}\n-

\n- {'bar'}\n- <\/div>,\n- el,\n- );\n+ it('can be toggled in and out of the markup', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+

\n+ {'foo'}\n+

\n+ {'bar'}\n+ <\/div>,\n+ );\n+ });\n+ let inst = container.firstChild;\n \n- let childNodes = filterOutComments(inst.childNodes);\n+ let childNodes = inst.childNodes;\n const childDiv = childNodes[1];\n \n- inst = ReactDOM.render(\n-

\n- {null}\n-

\n- {null}\n- <\/div>,\n- el,\n- );\n- childNodes = filterOutComments(inst.childNodes);\n+ await act(() => {\n+ root.render(\n+

\n+ {null}\n+

\n+ {null}\n+ <\/div>,\n+ );\n+ });\n+ inst = container.firstChild;\n+ childNodes = inst.childNodes;\n expect(childNodes.length).toBe(1);\n expect(childNodes[0]).toBe(childDiv);\n \n- inst = ReactDOM.render(\n-

\n- {'foo'}\n-

\n- {'bar'}\n- <\/div>,\n- el,\n- );\n- childNodes = filterOutComments(inst.childNodes);\n+ await act(() => {\n+ root.render(\n+

\n+ {'foo'}\n+

\n+ {'bar'}\n+ <\/div>,\n+ );\n+ });\n+ inst = container.firstChild;\n+ childNodes = inst.childNodes;\n expect(childNodes.length).toBe(3);\n expect(childNodes[0].data).toBe('foo');\n expect(childNodes[1]).toBe(childDiv);\n@@ -106,101 +111,125 @@ describe('ReactDOMTextComponent', () => {\n \n \/**\n * The following Node.normalize() tests are intentionally failing.\n- * See #9836 tracking whether we'll need to fix this or if it's unnecessary.\n+ * See https:\/\/github.com\/facebook\/react\/issues\/9836 tracking whether we'll need to fix this or if it's unnecessary.\n *\/\n+ \/\/ @gate TODO\n+ it('can reconcile text merged by Node.normalize() alongside other elements', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+

\n+ {'foo'}\n+ {'bar'}\n+ {'baz'}\n+ \n+ {'qux'}\n+ <\/div>,\n+ );\n+ });\n \n- xit('can reconcile text merged by Node.normalize() alongside other elements', () => {\n- const el = document.createElement('div');\n- let inst = ReactDOM.render(\n-

\n- {'foo'}\n- {'bar'}\n- {'baz'}\n- \n- {'qux'}\n- <\/div>,\n- el,\n- );\n+ const inst = container.firstChild;\n \n inst.normalize();\n \n- inst = ReactDOM.render(\n-

\n- {'bar'}\n- {'baz'}\n- {'qux'}\n- \n- {'foo'}\n- <\/div>,\n- el,\n- );\n+ await act(() => {\n+ root.render(\n+

\n+ {'bar'}\n+ {'baz'}\n+ {'qux'}\n+ \n+ {'foo'}\n+ <\/div>,\n+ container,\n+ );\n+ });\n expect(inst.textContent).toBe('barbazquxfoo');\n });\n \n- xit('can reconcile text merged by Node.normalize()', () => {\n- const el = document.createElement('div');\n- let inst = ReactDOM.render(\n-

\n- {'foo'}\n- {'bar'}\n- {'baz'}\n- <\/div>,\n- el,\n- );\n+ \/\/ @gate TODO\n+ it('can reconcile text merged by Node.normalize()', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+

\n+ {'foo'}\n+ {'bar'}\n+ {'baz'}\n+ <\/div>,\n+ );\n+ });\n+ let inst = container.firstChild;\n \n inst.normalize();\n \n- inst = ReactDOM.render(\n-

\n- {'bar'}\n- {'baz'}\n- {'qux'}\n- <\/div>,\n- el,\n- );\n+ await act(() => {\n+ root.render(\n+

\n+ {'bar'}\n+ {'baz'}\n+ {'qux'}\n+ <\/div>,\n+ container,\n+ );\n+ });\n+ inst = container.firstChild;\n expect(inst.textContent).toBe('barbazqux');\n });\n \n- it('can reconcile text from pre-rendered markup', () => {\n- const el = document.createElement('div');\n- let reactEl = (\n+ it('can reconcile text from pre-rendered markup', async () => {\n+ const container = document.createElement('div');\n+ let children = (\n

\n {'foo'}\n {'bar'}\n {'baz'}\n <\/div>\n );\n- el.innerHTML = ReactDOMServer.renderToString(reactEl);\n+ container.innerHTML = ReactDOMServer.renderToString(children);\n \n- ReactDOM.hydrate(reactEl, el);\n- expect(el.textContent).toBe('foobarbaz');\n+ const root = await act(() => {\n+ return ReactDOMClient.hydrateRoot(container, children);\n+ });\n+ expect(container.textContent).toBe('foobarbaz');\n \n- ReactDOM.unmountComponentAtNode(el);\n+ await act(() => {\n+ root.unmount();\n+ });\n \n- reactEl = (\n+ children = (\n

\n {''}\n {''}\n {''}\n <\/div>\n );\n- el.innerHTML = ReactDOMServer.renderToString(reactEl);\n+ container.innerHTML = ReactDOMServer.renderToString(children);\n \n- ReactDOM.hydrate(reactEl, el);\n- expect(el.textContent).toBe('');\n+ await act(() => {\n+ ReactDOMClient.hydrateRoot(container, children);\n+ });\n+ expect(container.textContent).toBe('');\n });\n \n- xit('can reconcile text arbitrarily split into multiple nodes', () => {\n- const el = document.createElement('div');\n- let inst = ReactDOM.render(\n-

\n- \n- {'foobarbaz'}\n- <\/div>,\n- el,\n- );\n+ \/\/ @gate TODO\n+ it('can reconcile text arbitrarily split into multiple nodes', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n- const childNodes = filterOutComments(inst.childNodes);\n+ await act(() => {\n+ root.render(\n+

\n+ \n+ {'foobarbaz'}\n+ <\/div>,\n+ );\n+ });\n+ let inst = container.firstChild;\n+\n+ const childNodes = inst.childNodes;\n const textNode = childNodes[1];\n textNode.textContent = 'foo';\n inst.insertBefore(\n@@ -212,32 +241,40 @@ describe('ReactDOMTextComponent', () => {\n childNodes[1].nextSibling,\n );\n \n- inst = ReactDOM.render(\n-

\n- \n- {'barbazqux'}\n- <\/div>,\n- el,\n- );\n+ await act(() => {\n+ root.render(\n+

\n+ \n+ {'barbazqux'}\n+ <\/div>,\n+ container,\n+ );\n+ });\n+ inst = container.firstChild;\n expect(inst.textContent).toBe('barbazqux');\n });\n \n- xit('can reconcile text arbitrarily split into multiple nodes on some substitutions only', () => {\n- const el = document.createElement('div');\n- let inst = ReactDOM.render(\n-

\n- \n- {'bar'}\n- \n- {'foobarbaz'}\n- {'foo'}\n- {'barfoo'}\n- \n- <\/div>,\n- el,\n- );\n+ \/\/ @gate TODO\n+ it('can reconcile text arbitrarily split into multiple nodes on some substitutions only', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+

\n+ \n+ {'bar'}\n+ \n+ {'foobarbaz'}\n+ {'foo'}\n+ {'barfoo'}\n+ \n+ <\/div>,\n+ );\n+ });\n \n- const childNodes = filterOutComments(inst.childNodes);\n+ let inst = container.firstChild;\n+\n+ const childNodes = inst.childNodes;\n const textNode = childNodes[3];\n textNode.textContent = 'foo';\n inst.insertBefore(\n@@ -255,38 +292,48 @@ describe('ReactDOMTextComponent', () => {\n childNodes[5].nextSibling,\n );\n \n- inst = ReactDOM.render(\n-

\n- \n- {'baz'}\n- \n- {'barbazqux'}\n- {'bar'}\n- {'bazbar'}\n- \n- <\/div>,\n- el,\n- );\n+ await act(() => {\n+ root.render(\n+

\n+ \n+ {'baz'}\n+ \n+ {'barbazqux'}\n+ {'bar'}\n+ {'bazbar'}\n+ \n+ <\/div>,\n+ container,\n+ );\n+ });\n+ inst = container.firstChild;\n expect(inst.textContent).toBe('bazbarbazquxbarbazbar');\n });\n \n- xit('can unmount normalized text nodes', () => {\n- const el = document.createElement('div');\n- ReactDOM.render(\n-

\n- {''}\n- {'foo'}\n- {'bar'}\n- <\/div>,\n- el,\n- );\n- el.normalize();\n- ReactDOM.render(

, el);\n- expect(el.innerHTML).toBe('

<\/div>');\n+ \/\/ @gate TODO\n+ it('can unmount normalized text nodes', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+

\n+ {''}\n+ {'foo'}\n+ {'bar'}\n+ <\/div>,\n+ );\n+ });\n+\n+ container.normalize();\n+ await act(() => {\n+ root.render(

);\n+ });\n+\n+ expect(container.innerHTML).toBe('

<\/div>');\n });\n \n- it('throws for Temporal-like text nodes', () => {\n- const el = document.createElement('div');\n+ it('throws for Temporal-like text nodes', async () => {\n+ const container = document.createElement('div');\n class TemporalLike {\n valueOf() {\n \/\/ Throwing here is the behavior of ECMAScript \"Temporal\" date\/time API.\n@@ -297,9 +344,12 @@ describe('ReactDOMTextComponent', () => {\n return '2020-01-01';\n }\n }\n- expect(() =>\n- ReactDOM.render(

{new TemporalLike()}<\/div>, el),\n- ).toThrowError(\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(\n+ act(() => {\n+ root.render(

{new TemporalLike()}<\/div>);\n+ }),\n+ ).rejects.toThrowError(\n new Error(\n 'Objects are not valid as a React child (found: object with keys {}).' +\n ' If you meant to render a collection of children, use an array instead.',\n","parents":["1c8901f750fe09396de311e9c9e1e337599b2e9c"],"commit":{"authorEmail":"silbermann.sebastian@gmail.com","shortRevision":"313e4d4129","authorName":"Sebastian Silbermann","authoredAt":"2024-01-29T09:11:02+01:00","revision":"313e4d4129088b3ed99ab64d15dd8b6de175261b","subject":"Convert ReactDOMTextComponent to createRoot (#28141)"}}

dillon1000/react

Files changed