unit-testing – 在测试中禁用React的CSSTransitionGroup

我正在使用CsstransitionGroup在元素出现在DOM中时,或者当它离开DOM时为元素设置动画.它运作良好.

现在 – 我想对这个组件进行单元测试.我正在创建一个临时DOM节点,我将它附加到< body>,我将我的组件渲染到它中,然后我执行一些操作.结果,我希望子DOM节点消失.

问题：
应用动画类,组件保留在DOM中,直到CSS动画结束.这意味着我的测试也应该等待几百毫秒才能断言该元素消失.我不能这样做 – 我希望我的测试很快,因为那些是单元测试.

问题是：
有没有办法在不向组件添加额外选项的情况下禁用CSS过渡？

我尝试了什么：
单元测试本身效果很好.我可以通过将参数传递给我的组件来摆脱动画,这将使它不使用CsstransitionGroup.所以 – 最糟糕的情况 – 我会做到这一点.但我正在寻找更好的解决方案.

我还可以断言,“-enter”/“ – enter-active”/“ – leave”/“ – leave-active”类存在于相关元素上.这看起来有点像hacky,因为我可以想象一个应用这些类的错误,但是元素将保留在DOM中.我宁愿不采用这种方法.

使用Jest这是我提出的解决方案.我嘲笑过渡组件.由于我的导入看起来像’react-transition-group’中的import {Transition},这就是我创建的：

根据我的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

相关文章