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.

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

Always

Just for now

@@ -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
@@ -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"
@@ -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>
@@ -14,7 +14,6 @@ let React;
let ReactDOM;
let ReactDOMServer;
let ReactTestUtils;
let act;

function getTestDocument(markup) {
const doc = document.implementation.createHTMLDocument('');
@@ -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', () => {
@@ -517,173 +515,4 @@ describe('ReactTestUtils', () => {
ReactTestUtils.renderIntoDocument(<Component />);
expect(mockArgs.length).toEqual(0);
});

This comment has been minimized.

Copy link
@threepointone

threepointone Feb 15, 2019

Author Contributor

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},
);
});
});
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.