मैं एक React घटक के लिए Jest के साथ एक इकाई परीक्षण लिखने का प्रयास कर रहा हूं जो react-transition-group से Transition का उपयोग करता है। मुझे Transition का मज़ाक उड़ाने की ज़रूरत है ताकि मेरे परीक्षणों को एनीमेशन के पूरा होने की प्रतीक्षा न करनी पड़े। हालांकि, एनीमेशन को 'छोड़ने' के अलावा, मुझे अपने नकली Transition घटक पर आग लगाने के लिए onExited कॉलबैक की आवश्यकता है।

यहां बताया गया है कि मेरा 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 कॉलबैक को सक्रिय कर दे?

4
artooras 24 अक्टूबर 2018, 12:10

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>
    }
}))
2
Herman Starikov 26 अक्टूबर 2018, 15:19