Testing animated components

[margusha]

I have a question regarding testing. after upgrading to 2.9.4 I started to get test failures that seem to be related to react-spring animations. Specifically, after Modals got wrapped into animated(…) I no longer can assert that modal was removed from DOM tree. My reasoning led me to think that requestAnimationFrame might be the issue. Do you have any suggestions how to test animated components?

[TheSisb]

Hello @margusha,

I think your hunch is correct, as Jest is possibly making the assertion on an in-progress unmount transition. I'm still working through the best guidance to provide, please bear with me as I work through the problem.

[TheSisb]

@margusha Just for clarity, can you tell me why you're trying to test if the modal unmounted successfully? I would argue that it's the concern of @twilio-paste/modal and not your app.

[margusha]

hey, we are covering all of our use cases and we want to see that when modal actions are completed successfully then the modal is hidden. for that we have used queryByText("modal title").not.toBeInTheDocument(). it worked until the animated wrapper was added and now queryByText still finds the modal. increasing JEST timeouts didn't affect anything. But when checking the DOM in actual browser, we see that modal is actually removed. so my reasoning is that react-spring works outside of react DOM tree and JEST tests with react-testing-library are not picking up the changes in DOM. will dig in a bit more when I have time but for time being seems we have to skip some tests.

Would be happy to hear if You have any ideas how to overcome this.

[TheSisb]

I made a minimal repro here: https://codesandbox.io/s/react-spring-unmount-component-after-transition-ends-cdjmx?file=/src/App.test.js and am currently unable to find a workaround. I made a ticket on the react-spring project asking the same question for additional advice: pmndrs/react-spring#1067

[TheSisb]

Marking as answered because stale. Please leave a comment if any new developments arise!