我正在尝试使用Jest为React组件编写单元测试,该组件利用了react-transition-group中的Transition。我需要模拟Transition,以便我的测试不必等待动画完成。但是,除了“跳过”动画之外,我还需要在模拟的Transition组件上触发onExited回调。
以下是我的Component.js如何使用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
回调?
props.onExited()
从未被调用... 我在Component.js
中的handleExited
方法中放置了一个console.log()
,但是消息从未被记录。我还检查了当我点击button
时是否调用了setState
,它确实被调用了。有任何想法它在哪里失败了吗?我将您的代码插入到我的Component.jest.js
中的const {getByText} = render(...
之前。 - artoorastest('check'...
之前。 - Herman StarikovTransition
组件的子代实际上是一个函数{status => ...}
。 我应该如何更新你的模拟来使其工作? - artoorasprops.children
,我已经更新了答案。 - Herman StarikovTransition: props => { !props.in && props.onExited(); return props.children(); }
,因为我需要始终返回children
,并且只有当in
为false时才需要执行onExited()
。 - artoorasonExited
调用上? - wariofan1