diff --git a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
index 5bd9b24d52277..928ddb8959a5d 100644
--- a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
+++ b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
@@ -22,7 +22,6 @@ describe 'ReactCoffeeScriptClass', ->
React = require 'react'
ReactDOM = require 'react-dom'
ReactDOMClient = require 'react-dom/client'
- act = require('jest-react').act
PropTypes = require 'prop-types'
container = document.createElement 'div'
root = ReactDOMClient.createRoot container
@@ -36,7 +35,7 @@ describe 'ReactCoffeeScriptClass', ->
return React.createElement('div', className: this.props.name)
test = (element, expectedTag, expectedClassName) ->
- act ->
+ ReactDOM.flushSync ->
root.render(element)
expect(container.firstChild).not.toBeNull()
expect(container.firstChild.tagName).toBe(expectedTag)
@@ -50,7 +49,7 @@ describe 'ReactCoffeeScriptClass', ->
class Foo extends React.Component
expect(->
expect(->
- act ->
+ ReactDOM.flushSync ->
root.render React.createElement(Foo)
).toThrow()
).toErrorDev([
@@ -103,7 +102,8 @@ describe 'ReactCoffeeScriptClass', ->
ref = React.createRef()
test React.createElement(Foo, initialValue: 'foo', ref: ref), 'DIV', 'foo'
- ref.current.changeState()
+ ReactDOM.flushSync ->
+ ref.current.changeState()
test React.createElement(Foo), 'SPAN', 'bar'
it 'sets initial state with value returned by static getDerivedStateFromProps', ->
@@ -129,7 +129,7 @@ describe 'ReactCoffeeScriptClass', ->
getDerivedStateFromProps: ->
{}
expect(->
- act ->
+ ReactDOM.flushSync ->
root.render React.createElement(Foo, foo: 'foo')
return
).toErrorDev 'Foo: getDerivedStateFromProps() is defined as an instance method and will be ignored. Instead, declare it as a static method.'
@@ -141,7 +141,7 @@ describe 'ReactCoffeeScriptClass', ->
getDerivedStateFromError: ->
{}
expect(->
- act ->
+ ReactDOM.flushSync ->
root.render React.createElement(Foo, foo: 'foo')
return
).toErrorDev 'Foo: getDerivedStateFromError() is defined as an instance method and will be ignored. Instead, declare it as a static method.'
@@ -153,7 +153,7 @@ describe 'ReactCoffeeScriptClass', ->
Foo.getSnapshotBeforeUpdate = () ->
{}
expect(->
- act ->
+ ReactDOM.flushSync ->
root.render React.createElement(Foo, foo: 'foo')
return
).toErrorDev 'Foo: getSnapshotBeforeUpdate() is defined as a static method and will be ignored. Instead, declare it as an instance method.'
@@ -170,7 +170,7 @@ describe 'ReactCoffeeScriptClass', ->
bar: 'bar'
}
expect(->
- act ->
+ ReactDOM.flushSync ->
root.render React.createElement(Foo, foo: 'foo')
return
).toErrorDev (
@@ -303,7 +303,7 @@ describe 'ReactCoffeeScriptClass', ->
)
test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
- act ->
+ ReactDOM.flushSync ->
attachedListener()
expect(renderedName).toBe 'bar'
@@ -340,7 +340,7 @@ describe 'ReactCoffeeScriptClass', ->
)
test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
- act ->
+ ReactDOM.flushSync ->
attachedListener()
expect(renderedName).toBe 'bar'
@@ -391,7 +391,7 @@ describe 'ReactCoffeeScriptClass', ->
'did-update', { value: 'foo' }, {}
]
lifeCycles = [] # reset
- act ->
+ ReactDOM.flushSync ->
root.unmount()
expect(lifeCycles).toEqual ['will-unmount']
diff --git a/packages/react/src/__tests__/ReactES6Class-test.js b/packages/react/src/__tests__/ReactES6Class-test.js
index 62f020849489f..70944b398dcbd 100644
--- a/packages/react/src/__tests__/ReactES6Class-test.js
+++ b/packages/react/src/__tests__/ReactES6Class-test.js
@@ -13,7 +13,6 @@ let PropTypes;
let React;
let ReactDOM;
let ReactDOMClient;
-let act;
describe('ReactES6Class', () => {
let container;
@@ -31,7 +30,6 @@ describe('ReactES6Class', () => {
React = require('react');
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
- act = require('jest-react').act;
container = document.createElement('div');
root = ReactDOMClient.createRoot(container);
attachedListener = null;
@@ -49,7 +47,7 @@ describe('ReactES6Class', () => {
});
function test(element, expectedTag, expectedClassName) {
- act(() => root.render(element));
+ ReactDOM.flushSync(() => root.render(element));
expect(container.firstChild).not.toBeNull();
expect(container.firstChild.tagName).toBe(expectedTag);
expect(container.firstChild.className).toBe(expectedClassName);
@@ -63,7 +61,7 @@ describe('ReactES6Class', () => {
it('throws if no render function is defined', () => {
class Foo extends React.Component {}
expect(() => {
- expect(() => act(() => root.render())).toThrow();
+ expect(() => ReactDOM.flushSync(() => root.render())).toThrow();
}).toErrorDev([
// A failed component renders four times in DEV in concurrent mode
'Warning: Foo(...): No `render` method found on the returned component ' +
@@ -118,7 +116,7 @@ describe('ReactES6Class', () => {
}
const ref = React.createRef();
test(, 'DIV', 'foo');
- act(() => ref.current.changeState());
+ ReactDOM.flushSync(() => ref.current.changeState());
test(, 'SPAN', 'bar');
});
@@ -148,7 +146,7 @@ describe('ReactES6Class', () => {
}
}
expect(() => {
- act(() => root.render());
+ ReactDOM.flushSync(() => root.render());
}).toErrorDev(
'Foo: getDerivedStateFromProps() is defined as an instance method ' +
'and will be ignored. Instead, declare it as a static method.',
@@ -165,7 +163,7 @@ describe('ReactES6Class', () => {
}
}
expect(() => {
- act(() => root.render());
+ ReactDOM.flushSync(() => root.render());
}).toErrorDev(
'Foo: getDerivedStateFromError() is defined as an instance method ' +
'and will be ignored. Instead, declare it as a static method.',
@@ -180,7 +178,7 @@ describe('ReactES6Class', () => {
}
}
expect(() => {
- act(() => root.render());
+ ReactDOM.flushSync(() => root.render());
}).toErrorDev(
'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +
'and will be ignored. Instead, declare it as an instance method.',
@@ -200,7 +198,7 @@ describe('ReactES6Class', () => {
}
}
expect(() => {
- act(() => root.render());
+ ReactDOM.flushSync(() => root.render());
}).toErrorDev(
'`Foo` uses `getDerivedStateFromProps` but its initial state is ' +
'undefined. This is not recommended. Instead, define the initial state by ' +
@@ -347,7 +345,7 @@ describe('ReactES6Class', () => {
}
test(, 'DIV', 'foo');
- act(() => attachedListener());
+ ReactDOM.flushSync(() => attachedListener());
expect(renderedName).toBe('bar');
});
@@ -388,7 +386,7 @@ describe('ReactES6Class', () => {
}
}
test(, 'DIV', 'foo');
- act(() => attachedListener());
+ ReactDOM.flushSync(() => attachedListener());
expect(renderedName).toBe('bar');
});
@@ -437,7 +435,7 @@ describe('ReactES6Class', () => {
'did-update', freeze({value: 'foo'}), {},
]);
lifeCycles = []; // reset
- act(() => root.unmount());
+ ReactDOM.flushSync(() => root.unmount());
expect(lifeCycles).toEqual(['will-unmount']);
});
diff --git a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
index dfea3cea47b3f..efaac47524efb 100644
--- a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
+++ b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
@@ -16,7 +16,6 @@ import ReactDOM = require('react-dom');
import ReactDOMClient = require('react-dom/client');
import ReactDOMTestUtils = require('react-dom/test-utils');
import PropTypes = require('prop-types');
-import internalAct = require('jest-react');
// Before Each
@@ -24,7 +23,6 @@ let container;
let root;
let attachedListener = null;
let renderedName = null;
-let act = internalAct.act;
class Inner extends React.Component {
getName() {
@@ -38,7 +36,7 @@ class Inner extends React.Component {
}
function test(element, expectedTag, expectedClassName) {
- act(() => root.render(element));
+ ReactDOM.flushSync(() => root.render(element));
expect(container.firstChild).not.toBeNull();
expect(container.firstChild.tagName).toBe(expectedTag);
expect(container.firstChild.className).toBe(expectedClassName);
@@ -331,7 +329,7 @@ describe('ReactTypeScriptClass', function() {
it('throws if no render function is defined', function() {
expect(() => {
expect(() =>
- act(() => root.render(React.createElement(Empty)))
+ ReactDOM.flushSync(() => root.render(React.createElement(Empty)))
).toThrow();
}).toErrorDev([
// A failed component renders four times in DEV in concurrent mode
@@ -366,7 +364,7 @@ describe('ReactTypeScriptClass', function() {
'DIV',
'foo'
);
- act(() => ref.current.changeState());
+ ReactDOM.flushSync(() => ref.current.changeState());
test(React.createElement(StateBasedOnProps), 'SPAN', 'bar');
});
@@ -401,7 +399,7 @@ describe('ReactTypeScriptClass', function() {
}
}
expect(function() {
- act(() =>
+ ReactDOM.flushSync(() =>
root.render(React.createElement(Foo, {foo: 'foo'}))
);
}).toErrorDev(
@@ -420,7 +418,7 @@ describe('ReactTypeScriptClass', function() {
}
}
expect(function() {
- act(() =>
+ ReactDOM.flushSync(() =>
root.render(React.createElement(Foo, {foo: 'foo'}))
);
}).toErrorDev(
@@ -437,7 +435,7 @@ describe('ReactTypeScriptClass', function() {
}
}
expect(function() {
- act(() =>
+ ReactDOM.flushSync(() =>
root.render(React.createElement(Foo, {foo: 'foo'}))
);
}).toErrorDev(
@@ -461,7 +459,7 @@ describe('ReactTypeScriptClass', function() {
}
}
expect(function() {
- act(() =>
+ ReactDOM.flushSync(() =>
root.render(React.createElement(Foo, {foo: 'foo'}))
);
}).toErrorDev(
@@ -547,7 +545,7 @@ describe('ReactTypeScriptClass', function() {
'DIV',
'foo'
);
- act(() => attachedListener());
+ ReactDOM.flushSync(() => attachedListener());
expect(renderedName).toBe('bar');
});
@@ -566,7 +564,7 @@ describe('ReactTypeScriptClass', function() {
'DIV',
'foo'
);
- act(() => attachedListener());
+ ReactDOM.flushSync(() => attachedListener());
expect(renderedName).toBe('bar');
});
@@ -590,7 +588,7 @@ describe('ReactTypeScriptClass', function() {
{},
]);
lifeCycles = []; // reset
- act(() => root.unmount(container));
+ ReactDOM.flushSync(() => root.unmount(container));
expect(lifeCycles).toEqual(['will-unmount']);
});
diff --git a/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts b/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
index 0b20d827b4514..eb6ad709efb1a 100644
--- a/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
+++ b/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
@@ -16,4 +16,5 @@ declare module 'react-dom' {
export function render(element : any, container : any) : any
export function unmountComponentAtNode(container : any) : void
export function findDOMNode(instance : any) : any
+ export function flushSync(cb : any) : any
}