Clay: Received warning 'Can't perform a React state update on an unmounted component' when using TabPane

[oliv-yu]

Our component in Search portal-search-rankings-web has been experiencing a console warning when running the react tests (https://issues.liferay.com/browse/LPS-110329), perhaps involved with the TabPane component?

[exec] console.error ../../../../node_modules/react-dom/cjs/react-dom.development.js:530 [exec] Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. [exec] in TabPane (created by ResultRankingsForm) [exec] in div (created by Content) [exec] in Content (created by ResultRankingsForm) [exec] in div (created by ResultRankingsForm) [exec] in ErrorBoundary (created by ResultRankingsForm) [exec] in div (created by ResultRankingsForm) [exec] in div (created by ResultRankingsForm) [exec] in div (created by ResultRankingsForm) [exec] in ResultRankingsForm

We've been trying to reproduce the warning using a sandbox, but this seems to only occur when running two or more of our tests at the same time, involved with cases like switching tabs and hiding/pinning our results.

Our test in question: https://github.com/liferay/liferay-portal/blob/master/modules/dxp/apps/portal-search-tuning/portal-search-tuning-rankings-web/test/js/components/ResultRankingsForm.es.js

Sandbox attempt: https://codesandbox.io/s/relaxed-poitras-r18yt

Any help in resolving this warning would be much appreciated!

@thektan

Environment

| Tech | Version |
| ----- | ------- |
| Clay | v3.1.0 |
| React | 16.12.0 |

[matuzalemsteles]

hey @oliv-yu this probably must be because of the delay we have to create the animation https://github.com/liferay/clay/blob/master/packages/clay-tabs/src/TabPane.tsx#L46. You will probably have to use jest.useFakeTimers() with jest.runAllTimers(), this gives you control over setTimeout and other asynchronous things in your testing environment. Let me know if it helps you.

[oliv-yu]

Thank you! That was exactly what we needed to stop seeing the warning!