Mocking animation completion callback in jest

Question

I'm trying to write a unit test with Jest for a Reactcomponent that utilises Transition from react-transition-group. I need to mock the Transition so my tests don't have to wait for the animation to complete. However, in addition to 'skipping' the animation, I need the onExited callback to fire on my mocked Transition component.

Here's how my Component.js is using Transition:

...
return (
  <Transition
    timeout={1500}
    in={this.state.show}
    onExited={handleExited}>
    {status =>
      <button onClick={this.setState({show: false}) className={`component-${status}`}>button</button>
    }
  </Transition>
)

And here's my Component.test.js:

import React from 'react'
import {render, fireEvent} from 'react-testing-library'

import Component from '../Component'

test('check', () => {
  const handleCompletion = jest.fn()
  const {getByText} = render(
    <Component
      onButtonClick={handleCompletion}
    />
  )
  const button = getByText('button')
  fireEvent.click(button)
  expect(handleCompletion).toHaveBeenCalledTimes(1)
})

The idea is that once a button is clicked, the component animates and then, on completion, fires a callback.

How do I mock the Transition correctly so it skips the animation but still fires the onExited callback?

Herman Starikov · Accepted Answer · 2018-10-26T15:19:06.480

2

You can mock modules with jest.mock like so:

jest.mock('react-transition-group', () => ({
    Transition: (props) => {
        props.onExited() // you can call it asynchronously too, if you wrap it in a timeout
        return <div>
            {props.in ? props.children() : null}
        </div>
    }
}))

edited Oct 26 '18 at 15:19

answered Oct 24 '18 at 19:38

Herman Starikov

2,636
15
26

Thanks for the suggestion. The `props.onExited()`, however, never gets called... I put a `console.log()` in my `handleExited` method in `Component.js`, but the message never gets logged. I have also checked if the `setState` is getting called when I click on the `button`, and it does. Any idea where it's failing? I inserted your code just before `const {getByText} = render(...` in my `Component.jest.js`. – artooras Oct 25 '18 at 08:56
My code needs to go after imports but before `test('check'...` – Herman Starikov Oct 25 '18 at 15:33
If I move your code after imports, it breaks all my other tests :) The error says `Warning: Functions are not valid as a React child.` I have updated my code sample in the question - I forgot to include that the child of the `Transition` component is actually a function `{status => ...}`. How should I update your mock to make it work? – artooras Oct 26 '18 at 12:28
you need to call the `props.children`, I updated the answer – Herman Starikov Oct 26 '18 at 15:19
Thank you! I have it working now. Only in the end, I have changed the code to `Transition: props => { !props.in && props.onExited(); return props.children(); }` as I need to return `children` always, and `onExited()` needs to be executed only when `in` is false. – artooras Oct 29 '18 at 10:08
late to the party here! any way to bind the DOM node to the `onExited` call? – wariofan1 Mar 16 '20 at 16:40

Mocking animation completion callback in jest

1 Answers1