我正在使用CSSTransitionGroup在元素出现在DOM中时,或者当它离开DOM时为元素设置动画.它运作良好.
现在 – 我想对这个组件进行单元测试.我正在创建一个临时DOM节点,我将它附加到< body>,我将我的组件渲染到它中,然后我执行一些操作.结果,我希望子DOM节点消失.
问题：
应用动画类,组件保留在DOM中,直到CSS动画结束.这意味着我的测试也应该等待几百毫秒才能断言该元素消失.我不能这样做 – 我希望我的测试很快,因为那些是单元测试.
问题是：
有没有办法在不向组件添加额外选项的情况下禁用CSS过渡？
我尝试了什么：
单元测试本身效果很好.我可以通过将参数传递给我的组件来摆脱动画,这将使它不使用CSSTransitionGroup.所以 – 最糟糕的情况 – 我会做到这一点.但我正在寻找更好的解决方案.
我还可以断言,“-enter”/“ – enter-active”/“ – leave”/“ – leave-active”类存在于相关元素上.这看起来有点像hacky,因为我可以想象一个应用这些类的错误,但是元素将保留在DOM中.我宁愿不采用这种方法.
使用Jest这是我提出的解决方案.我嘲笑过渡组件.由于我的导入看起来像’react-transition-group’中的import {Transition},这就是我创建的：
原文链接：https://www.f2er.com/react/301011.html根据我的jest配置,使用我的__mocks__文件夹中的任何内容而不是任何导入.
__mocks __ /反应器尾组/ index.js：
import Transition from './Transition'
export { Transition }
//more exports to come as I use other parts of react-transition-group
__mocks __ /反应器尾组/ Transition.js：
import React from 'react'
export default (props) => (
<div>
{props.in ? props.children() : null}
</div>
)
这样,孩子们立即被渲染 – “过渡”几乎被禁用.
**这适用于react-transition-group的v2.4.0
