-
-
Notifications
You must be signed in to change notification settings - Fork 226
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
Act warning in tests #368
Comments
Take a look at the react-popper tests, they work just fine |
It is possible that the underlying issue may have not been fixed. https://github.com/popperjs/react-popper/blob/master/src/Popper.test.js#L55
https://github.com/popperjs/react-popper/blob/master/src/usePopper.test.js
Some of them are unnecessary as per testing-library best practices From what I suspect it is happening because of the following reason We provide modifiers to the https://github.com/popperjs/popper-core/blob/master/src/index.js#L282 I also noticed the warnings are fixed if we manually unmount the component which further validates this theory. Thank you for looking into this |
I'm also encountering this same issue running tests with the Render Props version of popper – we're on React 16.8.x so we don't have access to async act() to mitigate the issue. I've included a basic example test below that raises the error: import React, { useState } from 'react';
import { render } from '@testing-library/react';
import { Manager, Popper, Reference } from 'react-popper';
function BasicPopper () {
return(
<Manager>
<Reference>{({ ref }) => <div ref={ref}>Reference element</div>}</Reference>
<Popper>
{({ ref, style }) => (
<div ref={ref} style={style}>
foo bar
</div>
)}
</Popper>
</Manager>
)
};
test('act warning', () => {
render(<BasicPopper />);
}); |
PRs to improve this are welcome |
@amanmahajan7 I suspect that this is the case as well. I'm dealing with a similar issue with a popper that's also supplied with modifiers. @FezVrasta I think this issue should be reopened. It's not resolved yet and an open issue will catch the attention of potential contributors more than a closed one. |
This appears to still be an issue in the new 'floating-ui' library. We recently adopted this and refactored in a hope this issue might have been solved as a side effect. +1 to re-open this issue please. |
@m7kvqbe1 do you have a reproduction when the warning occurs? Every time you perform a state update for Floating UI, if you're using RTL, you should be using userEvent.click(getByTestId('button'));
await waitFor(() => expect(...).toBe(...)); |
Or a find* query. For example: const userAddress = await findByLabel(/address/i), checkout
from https://testing-library.com/docs/react-testing-library/faq Basic this cannot be solved as Popper/Floating UI is updating state "outside" of react. |
A good solution for a problem could be in configuring update debounce to be synchronous in testing mode. And good news - this code just don't exists in floating-ui (modern popper) and updating is the best solution. |
The same issue also exists in Floating UI as it's an async function (to support async platform methods) which can't be made sync. I think the core of the issue is that testing library should change the timing of its cleanup function but likely won't happen: testing-library/react-testing-library#1073 It's a pain but there are two solutions (although I see the act warning get printed if the test fails, for the first one at least) |
The problem exists not only with "late" cleanup, but also with "continuous" render (as per @AndrewOCC example) render(<BasicPopper />);
// from @atomiks example about. This is an incorrect usage of userEvents as they are all async (now)
// userEvent.click(getByTestId('button'));
// this is correct
await userEvent.click(getByTestId('button'));
// ^^^ 💥 popper side effect will pop in the first and nearest await
await waitFor(() => expect(...).toBe(...)); In order to be "testable" all side effects have to be ended in |
Reproduction demo
Steps to reproduce the problem
usePopper
What is the expected behavior?
No act warning, or a way to address it without feeling like a cheap workaround.
What went wrong?
Any other comments?
This is probably coming from the use of
useEffect
(useIsomorphicLayoutEffect
) + state update.https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
Packages versions
The text was updated successfully, but these errors were encountered: