title: Mocking animation completion callback in jest
body: <p>I'm trying to write a unit test with <code>Jest</code> for a <code>React</code>component that utilises <code>Transition</code> from <code>react-transition-group</code>. I need to mock the <code>Transition</code> so my tests don't have to wait for the animation to complete. However, in addition to 'skipping' the animation, I need the <code>onExited</code> callback to fire on my mocked <code>Transition</code> component.</p>
  
  <p>Here's how my <code>Component.js</code> is using <code>Transition</code>:</p>
  
  <pre><code>...
  return (
    &lt;Transition
      timeout={1500}
      in={this.state.show}
      onExited={handleExited}&gt;
      {status =&gt;
        &lt;button onClick={this.setState({show: false}) className={`component-${status}`}&gt;button&lt;/button&gt;
      }
    &lt;/Transition&gt;
  )
  </code></pre>
  
  <p>And here's my <code>Component.test.js</code>:</p>
  
  <pre><code>import React from 'react'
  import {render, fireEvent} from 'react-testing-library'
  
  import Component from '../Component'
  
  test('check', () =&gt; {
    const handleCompletion = jest.fn()
    const {getByText} = render(
      &lt;Component
        onButtonClick={handleCompletion}
      /&gt;
    )
    const button = getByText('button')
    fireEvent.click(button)
    expect(handleCompletion).toHaveBeenCalledTimes(1)
  })
  </code></pre>
  
  <p>The idea is that once a <code>button</code> is clicked, the component animates and then, on completion, fires a callback.</p>
  
  <p>How do I mock the <code>Transition</code> correctly so it skips the animation but still fires the <code>onExited</code> callback?</p>