-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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
[test] Add missing async #44028
[test] Add missing async #44028
Conversation
Netlify deploy previewhttps://deploy-preview-44028--material-ui.netlify.app/ Bundle size report |
It looks correct actually mui/base-ui#706, the others are wrong. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tried an eslint rule but I noticed our codebase is full of sync act
'no-restricted-syntax': [
'error',
{
selector: "CallExpression[callee.name='act'] > ArrowFunctionExpression:not([async=true])",
message: 'Synchronous form of `act` is not allowed. Use `await act(async () => {...})` instead.',
},
{
selector: "CallExpression[callee.name='act']:not(AwaitExpression > CallExpression[callee.name='act'])",
message: '`act` must be awaited. Use `await act(async () => {...})` instead.',
},
],
We could plan some time to do a full sweep of the codebase, in my limited experience the sync version doesn't always work as expected. I wouldn't be surprised if mui/mui-x#14668 magically starts working if we remove all sync act
calls.
Off-topic, but copilot is really helpful when you want to write those rules
Craft an eslint
no-restricted-syntax
rule that disallows usingact
in its synchronous form. It disallowsact(() =>{ ...
and only allowsact(async () => { ...
. Likewise, add a rule that prevents callingact
without being awaited on.
Flawless, in seconds, no digging through AST-explorer and trying to reverse engineer their selector syntax
@@ -260,7 +260,7 @@ describe('<Menu />', () => { | |||
const item1 = getByTestId('item-1'); | |||
const item2 = getByTestId('item-2'); | |||
|
|||
await act(() => { | |||
await act(async () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why async is needed here if
items[0].focus(); does not have await ?
it make sense to have it as
await act(async () => items[0].focus());
or
await act(async () => {
await items[0].focus();
})
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
From https://react.dev/reference/react/act#await-act-async-actfn
We recommend using
act
withawait
and anasync
function. Although the sync version works in many cases, it doesn’t work in all cases and due to the way React schedules updates internally, it’s difficult to predict when you can use the sync version.We will deprecate and remove the sync version in the future.
or, the async
is there because it changes the behavior of act
. I understand it looks a bit strange to not await
anything. but it's still nicer than doing
await act(() => {
items[0].focus();
return Promise.resolve();
})
No need to await items[0].focus()
. It doesn't return a promise.
Same as mui/base-ui#706