在玩笑中模拟动画完成回调

Question

我正在尝试使用 Jest 为 React 组件编写一个单元测试，该组件使用 react-transition-group 中的 Transition。我需要模拟 Transition 这样我的测试就不必等待动画完成。但是，除了 'skipping' 动画之外，我还需要 onExited 回调来触发我模拟的 Transition 组件。

这是我的 Component.js 使用 Transition 的方式：

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

这是我的 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)
})

想法是，一旦 button 被点击，组件就会动画化，然后在完成时触发回调。

我如何正确地模拟 Transition 以便它跳过动画但仍然触发 onExited 回调？

Answer 1

您可以像这样使用 jest.mock 模拟模块：

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>
    }
}))

在玩笑中模拟动画完成回调

Mocking animation completion callback in jest

reactjs

mocking

jestjs

react-transition-group