Насмешливая анимация завершения обратного вызова в шутку - PullRequest
Новая
       12

Насмешливая анимация завершения обратного вызова в шутку

0 голосов
/ 24 октября 2018

Я пытаюсь написать модульный тест с Jest для компонента React, который использует Transition из react-transition-group.Мне нужно смоделировать Transition, чтобы мои тесты не ожидали завершения анимации.Однако, в дополнение к «пропуску» анимации, мне нужен обратный вызов 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?

1 Ответ

0 голосов
/ 24 октября 2018

Вы можете макетировать модули с помощью 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>
    }
}))
...