How to assert a component is unmounted at the end of a transition in tests?

[TheSisb]

Hi all,

I'm trying to test that a component has unmounted at the end of an animation, but the component seems to remain in the DOM no matter what I throw at it. Here's a codesandbox demo of my failing test: https://codesandbox.io/s/react-spring-unmount-component-after-transition-ends-cdjmx?file=/src/App.test.js

Any advice you can provide for this scenario without flat out disabling animations in tests?

[aleclarson]

I would argue that testing for an unmounted transition is unnecessary. That's the concern of react-spring, not your app.

without flat out disabling animations in tests

Why is this a requirement?

[TheSisb]

I would argue that testing for an unmounted transition is unnecessary. That's the concern of react-spring, not your app. Why is this a requirement?

We are covering all of our use cases and we want to see that, when modal actions are completed successfully, 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. When checking the DOM in an actual browser, we see that modal is actually removed.