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');
});