diff --git a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js index b30293f548b50..1ec444bea047c 100644 --- a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js @@ -11,8 +11,9 @@ let PropTypes; let React; -let ReactDOM; +let ReactDOMClient; let ReactTestUtils; +let act; function FunctionComponent(props) { return
{props.name}
; @@ -23,18 +24,23 @@ describe('ReactFunctionComponent', () => { jest.resetModules(); PropTypes = require('prop-types'); React = require('react'); - ReactDOM = require('react-dom'); + ReactDOMClient = require('react-dom/client'); + act = require('internal-test-utils').act; ReactTestUtils = require('react-dom/test-utils'); }); - it('should render stateless component', () => { + it('should render stateless component', async () => { const el = document.createElement('div'); - ReactDOM.render(, el); + + const root = ReactDOMClient.createRoot(el); + await act(() => { + root.render(); + }); expect(el.textContent).toBe('A'); }); - it('should update stateless component', () => { + it('should update stateless component', async () => { class Parent extends React.Component { render() { return ; @@ -42,25 +48,34 @@ describe('ReactFunctionComponent', () => { } const el = document.createElement('div'); - ReactDOM.render(, el); + + const root = ReactDOMClient.createRoot(el); + await act(() => { + root.render(); + }); expect(el.textContent).toBe('A'); - ReactDOM.render(, el); + await act(() => { + root.render(); + }); expect(el.textContent).toBe('B'); }); - it('should unmount stateless component', () => { + it('should unmount stateless component', async () => { const container = document.createElement('div'); - ReactDOM.render(, container); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); expect(container.textContent).toBe('A'); - ReactDOM.unmountComponentAtNode(container); + root.unmount(); expect(container.textContent).toBe(''); }); // @gate !disableLegacyContext - it('should pass context thru stateless component', () => { + it('should pass context thru stateless component', async () => { class Child extends React.Component { static contextTypes = { test: PropTypes.string.isRequired, @@ -90,16 +105,22 @@ describe('ReactFunctionComponent', () => { } const el = document.createElement('div'); - ReactDOM.render(, el); + + const root = ReactDOMClient.createRoot(el); + await act(() => { + root.render(); + }); expect(el.textContent).toBe('test'); - ReactDOM.render(, el); + await act(() => { + root.render(); + }); expect(el.textContent).toBe('mest'); }); - it('should warn for getDerivedStateFromProps on a function component', () => { + it('should warn for getDerivedStateFromProps on a function component', async () => { function FunctionComponentWithChildContext() { return null; } @@ -107,15 +128,18 @@ describe('ReactFunctionComponent', () => { const container = document.createElement('div'); - expect(() => - ReactDOM.render(, container), - ).toErrorDev( + await expect(async () => { + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); + }).toErrorDev( 'FunctionComponentWithChildContext: Function ' + 'components do not support getDerivedStateFromProps.', ); }); - it('should warn for childContextTypes on a function component', () => { + it('should warn for childContextTypes on a function component', async () => { function FunctionComponentWithChildContext(props) { return
{props.name}
; } @@ -126,12 +150,12 @@ describe('ReactFunctionComponent', () => { const container = document.createElement('div'); - expect(() => - ReactDOM.render( - , - container, - ), - ).toErrorDev( + await expect(async () => { + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); + }).toErrorDev( 'FunctionComponentWithChildContext(...): childContextTypes cannot ' + 'be defined on a function component.', ); @@ -378,7 +402,7 @@ describe('ReactFunctionComponent', () => { }); // @gate !disableLegacyContext - it('should receive context', () => { + it('should receive context', async () => { class Parent extends React.Component { static childContextTypes = { lang: PropTypes.string, @@ -399,7 +423,11 @@ describe('ReactFunctionComponent', () => { Child.contextTypes = {lang: PropTypes.string}; const el = document.createElement('div'); - ReactDOM.render(, el); + + const root = ReactDOMClient.createRoot(el); + await act(() => { + root.render(); + }); expect(el.textContent).toBe('en'); });