[BUG] Testing AnimatePresence with RTL

Hi!

Describe the bug I’m using AnimatePresence to animate the enter & exit of a modal based on a boolean prop. The issue comes when I want to test, with React Testing Library, the rendering of the AnimatePresence childrens. I get an error and I’m not able to resolve the issue.

To Reproduce

// Modal.tsx
import React from 'react'
import { AnimatePresence } from 'framer-motion'
import { ModalBackground, ModalContainer } from './styles'

interface ModalProps {
  isOpen: boolean
}

const Modal: React.FC<ModalProps> = ({ children, isOpen }) => {
  return (
    <AnimatePresence>
      {isOpen && (
        <ModalBackground
          key="modal-background"
          initial={{ opacity: 0, backdropFilter: 'blur(0px)' }}
          animate={{ opacity: 1, backdropFilter: 'blur(4px)' }}
          exit={{ opacity: 0, backdropFilter: 'blur(0px)' }}
          transition={{ duration: 0.5 }}
        >
          <ModalContainer
            key="modal-container"
            initial={{ y: '100%' }}
            animate={{ y: 0 }}
            exit={{ y: '100%' }}
            data-testid="modal-container"
          >
            {children}
          </ModalContainer>
        </ModalBackground>
      )}
    </AnimatePresence>
  )
}

export default Modal

// Modal.test.tsx
import React from 'react'
import Modal from './Modal'
import { render } from '@testing-library/react'

describe('Modal', () => {
  const MockComponent = () => <span />
  it(`doesn't render any children`, () => {
    const { container } = render(
      <Modal isOpen={false}>
        <MockComponent />
      </Modal>
    )

    expect(container.firstChild).toBeFalsy()
  })

  // THIS TEST FAILS
  it(`renders the modal`, () => {
    const { findByTestId } = render(
      <Modal isOpen>
        <MockComponent />
      </Modal>
    )

    findByTestId('modal-container')
  })
})

TypeError: Cannot read property '1' of null

  console.error ../node_modules/react-dom/cjs/react-dom.development.js:19814
    The above error occurred in one of your React components:
        in Unknown (created by ForwardRef(MotionComponent))
        in ForwardRef(MotionComponent) (created by ModalContainer)
        in ModalContainer (at Modal.tsx:34)
        in div (created by ForwardRef(MotionComponent))
        in ForwardRef(MotionComponent) (created by ModalBackground)
        in ModalBackground (at Modal.tsx:26)
        in PresenceChild (created by AnimatePresence)
        in AnimatePresence (at Modal.tsx:24)
        in Modal (at Modal.test.tsx:20)

Additional context The error only happens when I pass the boolean prop isOpen as true. As false doesn’t render anything as expected.

Any ideas?

[ericmurrayclear]

Thanks @TSMMark unfortunately that gives the same error result. I wish framer-motion would give some test examples. So far I have to use @testing-library/react waitFor to wait for the animation to complete. This is slowing down tests. I was hoping your method would allow me to mock it in a way where I could not have to wait for the animation to complete before I could see the rendered result.

[Yagogc]

Any update around how to properly test framer/motion?