Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

await act(async () => ...) #14853

Merged
merged 71 commits into from
Apr 2, 2019
Merged

await act(async () => ...) #14853

Show file tree
Hide file tree
Changes from 36 commits
Commits
Show all changes
71 commits
Select commit Hold shift + click to select a range
9791a6b
hacked up act(async () => {...})
Feb 12, 2019
49876c3
move stuff around
Feb 14, 2019
d16525a
Merge remote-tracking branch 'upstream/master' into async-act
Feb 14, 2019
0a1b308
Merge remote-tracking branch 'upstream/master' into async-act
Feb 14, 2019
5cf26ba
merge changes
Feb 14, 2019
d2ea31e
abstract .act warnings and stuff. all renderers. pass all tests.
Feb 15, 2019
c7e07c7
Merge remote-tracking branch 'upstream/master' into async-act
Feb 15, 2019
3c4142b
move testutils.act back into testutils
Feb 15, 2019
331d9eb
move into scheduler, rename some bits
Feb 15, 2019
d0daebf
smaller bundle
Feb 15, 2019
00c2fd6
a comment for why we don't do typeof === 'function'
Feb 15, 2019
788fd73
fix test
Feb 15, 2019
cd2f191
pass tests - fire, prod
Feb 15, 2019
6af7e80
lose actContainerElement
Feb 15, 2019
a8fb80b
tighter
Feb 15, 2019
955d590
write a test for TestRenderer
Feb 16, 2019
ee8086a
lint
Feb 16, 2019
441e597
rewrote to move flushing logic closer to the renderer
Feb 16, 2019
c07174b
move it around so the delta isn't too bad
Feb 16, 2019
95bffdf
Merge remote-tracking branch 'upstream/master' into async-act
Feb 25, 2019
0fe5318
cleanups
Feb 25, 2019
c0a4573
Stray comment
Feb 25, 2019
1b1a896
recursively flush effects
Feb 28, 2019
06d8391
Merge branch 'async-act' of github.com:threepointone/react into async…
Feb 28, 2019
6c2bcc5
Merge remote-tracking branch 'upstream/master' into async-act
Mar 1, 2019
3028209
fixed tests
Mar 1, 2019
7da103b
lint, move noop.act into react-reconciler
Mar 1, 2019
cc51fca
microtasks when checking if called, s/called/calledLog, cleanup
Mar 4, 2019
91a3ff4
pass fb lint
Mar 4, 2019
a5e84e2
Merge remote-tracking branch 'upstream/master' into async-act
Mar 6, 2019
8688517
shorter timers, fix a test, test for Promise
Mar 6, 2019
308d14f
use global.Promise for existence check
Mar 8, 2019
edfafa5
Merge remote-tracking branch 'upstream/master' into async-act
Mar 8, 2019
13f43fd
Merge remote-tracking branch 'upstream/master' into async-act
Mar 11, 2019
6283cf4
flush microtasks
Mar 13, 2019
38bf178
a version that works in browsers (that support postMessage)
Mar 13, 2019
ab521ce
hoist flushEffectsAndMicroTasks
Mar 13, 2019
ae46998
pull out tick logic from ReactFiberScheduler
Mar 14, 2019
2779bae
fix await act (...sync) hanging
Mar 15, 2019
d36b8d5
feedback changes
Mar 15, 2019
3766812
pass lint/flow checks (without requiring a Promise polyfill/exclusion)
Mar 15, 2019
f66ed55
Merge remote-tracking branch 'upstream/master' into async-act
Mar 15, 2019
ad55c26
prettier
Mar 15, 2019
a29f008
use globalPromise for the missed await warning
Mar 15, 2019
a777344
__DEV__ check for didWarnAboutMessageChannel
Mar 15, 2019
aa37d51
thenables and callbacks instead of promises, pass flow/lint
Mar 15, 2019
c4afc5f
tinier. better.
Mar 16, 2019
7998527
pass build validation
Mar 16, 2019
e37602b
augh prettier
Mar 16, 2019
58ecb21
golfing 7 more chars
Mar 16, 2019
04a4e91
Test that effects are not flushed without also flushing microtasks
acdlite Mar 16, 2019
cdcbc7c
Merge remote-tracking branch 'upstream/master' into async-act
Mar 16, 2019
6a8cc02
Merge branch 'async-act' of github.com:threepointone/react into async…
Mar 16, 2019
429bda2
export doesHavePendingPassiveEffects, nits
Mar 16, 2019
adc92b4
createAct()
Mar 24, 2019
c1ee84e
dead code
Mar 24, 2019
53d3fbf
Merge remote-tracking branch 'upstream/master' into async-act
Mar 25, 2019
ad548b5
missed in merge?
Mar 25, 2019
8e4ea16
Merge remote-tracking branch 'upstream/master' into async-act
Mar 27, 2019
573a991
lose the preflushing bits
Mar 27, 2019
91d40cd
ugh prettier
Mar 27, 2019
c97cee4
removed `actedUpdates()`, created shared/actingUpdatesScopeDepth
Mar 31, 2019
65d9d0c
Merge remote-tracking branch 'upstream/master' into async-act
Mar 31, 2019
efffcb4
rearrange imports so builds work, remove the hack versions of flushPa…
Apr 1, 2019
d01d0c9
represent actingUpdatesScopeDepth as a tuple [number]
Apr 1, 2019
8737f7d
use a shared flag on React.__SECRET...
Apr 2, 2019
5a9081a
remove createAct, setup act for all relevant renderers
Apr 2, 2019
44236c9
review feedback
Apr 2, 2019
068561a
move act() implementation into createReactNoop
Apr 2, 2019
abf1e3a
Merge remote-tracking branch 'upstream/master' into async-act
Apr 2, 2019
e49e043
warnIfNotCurrentlyActingUpdatesInDev condition check order
Apr 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions fixtures/dom/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ public/react-dom.development.js
public/react-dom.production.min.js
public/react-dom-server.browser.development.js
public/react-dom-server.browser.production.min.js
public/react-dom-test-utils.development.js
public/react-dom-test-utils.production.min.js

# misc
.DS_Store
Expand Down
2 changes: 1 addition & 1 deletion fixtures/dom/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
},
"scripts": {
"start": "react-scripts start",
"prestart": "cp ../../build/node_modules/react/umd/react.development.js ../../build/node_modules/react-dom/umd/react-dom.development.js ../../build/node_modules/react/umd/react.production.min.js ../../build/node_modules/react-dom/umd/react-dom.production.min.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js public/",
"prestart": "cp ../../build/node_modules/react/umd/react.development.js ../../build/node_modules/react-dom/umd/react-dom.development.js ../../build/node_modules/react/umd/react.production.min.js ../../build/node_modules/react-dom/umd/react-dom.production.min.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js ../../build/node_modules/react-dom/umd/react-dom-test-utils.development.js ../../build/node_modules/react-dom/umd/react-dom-test-utils.production.min.js public/",
"build": "react-scripts build && cp build/index.html build/200.html",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
Expand Down
41 changes: 41 additions & 0 deletions fixtures/dom/public/act-dom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>sanity test for ReactTestUtils.act</title>
</head>
<body>
this page tests whether act runs properly in a browser.
<br/>
your console should say "5"
<script src='react.development.js'></script>
<script src='react-dom.development.js'></script>
<script src='react-dom-test-utils.development.js'></script>
<script>
async function run(){
// from ReactTestUtilsAct-test.js
function App() {
let [state, setState] = React.useState(0);
async function ticker() {
await null;
setState(x => x + 1);
}
React.useEffect(
() => {
ticker();
},
[Math.min(state, 4)],
);
return state;
}
const el = document.createElement('div');
await ReactTestUtils.act(async () => {
ReactDOM.render(React.createElement(App), el);
});
// all 5 ticks present and accounted for
console.log(el.innerHTML);
}
run();

</script>
</body>
</html>
171 changes: 0 additions & 171 deletions packages/react-dom/src/__tests__/ReactTestUtils-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ let React;
let ReactDOM;
let ReactDOMServer;
let ReactTestUtils;
let act;

function getTestDocument(markup) {
const doc = document.implementation.createHTMLDocument('');
Expand All @@ -34,7 +33,6 @@ describe('ReactTestUtils', () => {
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
ReactTestUtils = require('react-dom/test-utils');
act = ReactTestUtils.act;
});

it('Simulate should have locally attached media events', () => {
Expand Down Expand Up @@ -517,173 +515,4 @@ describe('ReactTestUtils', () => {
ReactTestUtils.renderIntoDocument(<Component />);
expect(mockArgs.length).toEqual(0);
});

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved these tests into a separate file for .act tests

it('can use act to batch effects', () => {
function App(props) {
React.useEffect(props.callback);
return null;
}
const container = document.createElement('div');
document.body.appendChild(container);

try {
let called = false;
act(() => {
ReactDOM.render(
<App
callback={() => {
called = true;
}}
/>,
container,
);
});

expect(called).toBe(true);
} finally {
document.body.removeChild(container);
}
});

it('flushes effects on every call', () => {
function App(props) {
let [ctr, setCtr] = React.useState(0);
React.useEffect(() => {
props.callback(ctr);
});
return (
<button id="button" onClick={() => setCtr(x => x + 1)}>
click me!
</button>
);
}

const container = document.createElement('div');
document.body.appendChild(container);
let calledCtr = 0;
act(() => {
ReactDOM.render(
<App
callback={val => {
calledCtr = val;
}}
/>,
container,
);
});
const button = document.getElementById('button');
function click() {
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
}

act(() => {
click();
click();
click();
});
expect(calledCtr).toBe(3);
act(click);
expect(calledCtr).toBe(4);
act(click);
expect(calledCtr).toBe(5);

document.body.removeChild(container);
});

it('can use act to batch effects on updates too', () => {
function App() {
let [ctr, setCtr] = React.useState(0);
return (
<button id="button" onClick={() => setCtr(x => x + 1)}>
{ctr}
</button>
);
}
const container = document.createElement('div');
document.body.appendChild(container);
let button;
act(() => {
ReactDOM.render(<App />, container);
});
button = document.getElementById('button');
expect(button.innerHTML).toBe('0');
act(() => {
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
});
expect(button.innerHTML).toBe('1');
document.body.removeChild(container);
});

it('detects setState being called outside of act(...)', () => {
let setValueRef = null;
function App() {
let [value, setValue] = React.useState(0);
setValueRef = setValue;
return (
<button id="button" onClick={() => setValue(2)}>
{value}
</button>
);
}
const container = document.createElement('div');
document.body.appendChild(container);
let button;
act(() => {
ReactDOM.render(<App />, container);
button = container.querySelector('#button');
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
});
expect(button.innerHTML).toBe('2');
expect(() => setValueRef(1)).toWarnDev([
'An update to App inside a test was not wrapped in act(...).',
]);
document.body.removeChild(container);
});

it('lets a ticker update', () => {
function App() {
let [toggle, setToggle] = React.useState(0);
React.useEffect(() => {
let timeout = setTimeout(() => {
setToggle(1);
}, 200);
return () => clearTimeout(timeout);
});
return toggle;
}
const container = document.createElement('div');

act(() => {
act(() => {
ReactDOM.render(<App />, container);
});
jest.advanceTimersByTime(250);
});

expect(container.innerHTML).toBe('1');
});

it('warns if you return a value inside act', () => {
expect(() => act(() => null)).toWarnDev(
[
'The callback passed to ReactTestUtils.act(...) function must not return anything.',
],
{withoutStack: true},
);
expect(() => act(() => 123)).toWarnDev(
[
'The callback passed to ReactTestUtils.act(...) function must not return anything.',
],
{withoutStack: true},
);
});

it('warns if you try to await an .act call', () => {
expect(act(() => {}).then).toWarnDev(
[
'Do not await the result of calling ReactTestUtils.act(...), it is not a Promise.',
],
{withoutStack: true},
);
});
});
Loading