Implement support for async act callbacks and nested calls to act
#1854
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add a transform to convert async/await to Promises for use in tests. This is the same low-footprint transform used by microbundle. Slack discussion: https://preact.slack.com/archives/G9T60GUQ0/p1565514000140700
Implement initial support for `act` callbacks returning a Promise, in which case the promise is awaited before state updates and effects are flushed. See https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#async-act-for-testing for more details on the motivation.
When calls to act are nested, effects and component updates are only flushed when the outer `act` call returns, as per [1] and [2]. This is convenient for creating helper functions which may invoke `act` themselves. [1] facebook/react#15682 [2] facebook/react#15472
test-utils/src/index.js
Outdated
| */ | ||
| export function act(cb) { | ||
| ++actDepth; | ||
| if (actDepth > 1) { |
There was a problem hiding this comment.
Super super tiny nit: We can combine this line and the above one:
if (++actDepth > 1) { ... }
marvinhagemeister
approved these changes
Aug 11, 2019
Merged
test-utils/test/shared/act.test.js
Outdated
|
|
||
| act(() => { | ||
| act(() => { | ||
| button.dispatchEvent(new Event('click')); |
There was a problem hiding this comment.
This will fail in IE11 because it doesn't support new Event(). I have a PR ready which introduces a helper method for that: https://github.com/preactjs/preact/pull/1856/files#diff-d429c5e5b8692f8b67a9d38592332a1eR8
There was a problem hiding this comment.
Thanks for catching this. I've updated the code to use the helper.
test-utils/test/shared/act.test.js
Outdated
| expect(counter).to.equal(0); | ||
|
|
||
| act(() => { | ||
| button.dispatchEvent(new Event('click')); |
There was a problem hiding this comment.
Same IE11 issue as below
Merge in `createEvent` test helper from master.
- Use `createEvent` helper instead of `new Event` for IE 11 compatibility - Combine `actDepth` increment with test
|
Feedback / IE 11 issues addressed. Thanks for the super-swift review :) |
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR implements support for passing async callbacks to
actand nesting calls toact, matching React 16.9.0. This is useful in cases where triggering an effect or state change involves async steps, such as waiting for afetchcall to resolve.Following React's behavior,
actreturns a Promise which resolves immediately if the callback is synchronous or after the callback resolves if it is asynchronous. Awaiting the result ofactbefore making assertions is optional if the callback is sync, but required if the callback is async, as effects/updates are not flushed until the callback's result has resolved in that case.When calls to
actare nested, effects and updates are only flushed when the outeractcall returns. This also follows React's behavior.One feature of React's
actthat is not implemented yet is warning if you pass an async callback toactbut forget to await the result.actact