{"body":"Convert ReactElement-test to createRoot","files":[{"status":"M","path":"packages\/react\/src\/__tests__\/ReactElement-test.js"}],"commit":{"subject":"Convert ReactElement-test to createRoot (#27918)","shortRevision":"344a6675a9","authoredAt":"2024-01-10T10:16:38-05:00","revision":"344a6675a9974d9e7b14542dd4e8bddb81a235e5","authorName":"Jan Kassens","authorEmail":"jkassens@meta.com"},"parents":["c81f4e02bab9d03e1583047d041fdb5e4eb19415"],"patch":"diff --git a\/packages\/react\/src\/__tests__\/ReactElement-test.js b\/packages\/react\/src\/__tests__\/ReactElement-test.js\nindex a2440486c2..a7ff7d9747 100644\n--- a\/packages\/react\/src\/__tests__\/ReactElement-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactElement-test.js\n@@ -9,8 +9,10 @@\n \n 'use strict';\n \n+let act;\n+\n let React;\n-let ReactDOM;\n+let ReactDOMClient;\n let ReactTestUtils;\n \n describe('ReactElement', () => {\n@@ -19,8 +21,10 @@ describe('ReactElement', () => {\n beforeEach(() => {\n jest.resetModules();\n \n+ act = require('internal-test-utils').act;\n+\n React = require('react');\n- ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n ReactTestUtils = require('react-dom\/test-utils');\n \/\/ NOTE: We're explicitly not using JSX here. This is intended to test\n \/\/ classic JS without JSX.\n@@ -43,11 +47,10 @@ describe('ReactElement', () => {\n expect(element.props).toEqual({});\n });\n \n- it('should warn when `key` is being accessed on composite element', () => {\n- const container = document.createElement('div');\n+ it('should warn when `key` is being accessed on composite element', async () => {\n class Child extends React.Component {\n render() {\n- return

{this.props.key} <\/div>;\n+ return

{this.props.key}<\/div>;\n }\n }\n class Parent extends React.Component {\n@@ -61,7 +64,12 @@ describe('ReactElement', () => {\n );\n }\n }\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Child: `key` is not a prop. Trying to access it will result ' +\n 'in `undefined` being returned. If you need to access the same ' +\n 'value within the child component, you should pass it as a different ' +\n@@ -80,8 +88,7 @@ describe('ReactElement', () => {\n );\n });\n \n- it('should warn when `ref` is being accessed', () => {\n- const container = document.createElement('div');\n+ it('should warn when `ref` is being accessed', async () => {\n class Child extends React.Component {\n render() {\n return

{this.props.ref} <\/div>;\n@@ -96,7 +103,13 @@ describe('ReactElement', () => {\n );\n }\n }\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Child: `ref` is not a prop. Trying to access it will result ' +\n 'in `undefined` being returned. If you need to access the same ' +\n 'value within the child component, you should pass it as a different ' +\n@@ -288,7 +301,7 @@ describe('ReactElement', () => {\n \n \/\/ NOTE: We're explicitly not using JSX here. This is intended to test\n \/\/ classic JS without JSX.\n- it('should use default prop value when removing a prop', () => {\n+ it('should use default prop value when removing a prop', async () => {\n class Component extends React.Component {\n render() {\n return React.createElement('span');\n@@ -297,13 +310,18 @@ describe('ReactElement', () => {\n Component.defaultProps = {fruit: 'persimmon'};\n \n const container = document.createElement('div');\n- const instance = ReactDOM.render(\n- React.createElement(Component, {fruit: 'mango'}),\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ const ref = React.createRef();\n+ await act(() => {\n+ root.render(React.createElement(Component, {ref, fruit: 'mango'}));\n+ });\n+ const instance = ref.current;\n expect(instance.props.fruit).toBe('mango');\n \n- ReactDOM.render(React.createElement(Component), container);\n+ await act(() => {\n+ root.render(React.createElement(Component));\n+ });\n expect(instance.props.fruit).toBe('persimmon');\n });\n \n@@ -328,7 +346,7 @@ describe('ReactElement', () => {\n expect(inst2.props.prop).toBe(null);\n });\n \n- it('throws when changing a prop (in dev) after element creation', () => {\n+ it('throws when changing a prop (in dev) after element creation', async () => {\n class Outer extends React.Component {\n render() {\n const el =

;\n@@ -346,15 +364,21 @@ describe('ReactElement', () => {\n return el;\n }\n }\n- const outer = ReactTestUtils.renderIntoDocument();\n+\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n if (__DEV__) {\n- expect(ReactDOM.findDOMNode(outer).className).toBe('moo');\n+ expect(container.firstChild.className).toBe('moo');\n } else {\n- expect(ReactDOM.findDOMNode(outer).className).toBe('quack');\n+ expect(container.firstChild.className).toBe('quack');\n }\n });\n \n- it('throws when adding a prop (in dev) after element creation', () => {\n+ it('throws when adding a prop (in dev) after element creation', async () => {\n const container = document.createElement('div');\n class Outer extends React.Component {\n render() {\n@@ -374,12 +398,15 @@ describe('ReactElement', () => {\n }\n }\n Outer.defaultProps = {sound: 'meow'};\n- const outer = ReactDOM.render(, container);\n- expect(ReactDOM.findDOMNode(outer).textContent).toBe('meow');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ expect(container.firstChild.textContent).toBe('meow');\n if (__DEV__) {\n- expect(ReactDOM.findDOMNode(outer).className).toBe('');\n+ expect(container.firstChild.className).toBe('');\n } else {\n- expect(ReactDOM.findDOMNode(outer).className).toBe('quack');\n+ expect(container.firstChild.className).toBe('quack');\n }\n });\n \n"}

dillon1000/react

Files changed