在测试中禁用React的CSSTransitionGroup
当元素出现在DOM中或离开DOM时，我使用CSSTransitionGroup对元素进行动画处理。它工作得很好。
现在-我想对这个组件进行单元测试。我正在创建一个临时DOM节点，并将其附加到<body>，在其中呈现我的组件，然后执行一些操作。因此，我希望一个子DOM节点消失。
问题:应用了动画类，组件一直保留在DOM中，直到动画结束。这意味着我的测试也应该等待几百毫秒，然后我才能断言该元素已经消失。我不能这样做--我希望我的测试速度快，因为这些都是单元测试。
这个问题：有没有一种方法可以在不向组件添加额外选项的情况下禁用CSS转换？
我尝试了什么：单元测试本身运行良好。我可以通过向我的组件传递一个参数，使其不使用CSSTransitionGroup来消除动画。所以--最坏的情况--我就这么做。但我在寻找一个更好的解决方案。
我还可以断言，有问题的元素上存在"-enter"/"-enter-active"/"-leave"/"-leave-active“类。这似乎有点老生常谈，因为我可以想象一个bug，其中将应用这些类，但元素将保留在DOM中。我不想求助于这种方法。
回答 5
Stack Overflow用户
发布于 2018-08-03 07:58:58
使用Jest，这就是我想出的解决方案。我模拟了Transition组件。由于我的导入看起来像import {Transition} from 'react-transition-group'，下面是我创建的内容：
根据我的jest配置，将使用在我的__mocks__文件夹中找到的任何内容，而不是任何导入。
__mocks__/react-transition-group/index.js
import Transition from './Transition'
export { Transition }
//more exports to come as I use other parts of react-transition-group__mocks__/react-transition-group/Transition.js
import React from 'react'
export default (props) => (
<div>
{props.in ? props.children() : null}
</div>
)这样，孩子就会立即被渲染-- "Transition“几乎被禁用。
**适用于react-transition-group的v2.4.0
Stack Overflow用户
发布于 2016-11-17 23:52:49
我相信有一个更简洁的解决方案使用proxyquire (在我的基于browserify的构建中使用proxyquireify)。受到前面答案的启发。
./stubs/react_css_transition_group.js
const { createElement: el, Component } = require('react')
class ReactCSSTransitionGroup extends Component {
constructor(props) {
super(props)
}
render() {
const { children, component } = this.props
return el(component, null, children)
}
}
ReactCSSTransitionGroup.defaultProps = {
component: 'div'
}
module.exports = ReactCSSTransitionGroup./foo_test.js
const test = require('tape')
const { mount } = require('enzyme')
const { createElement: el } = require('react')
const proxyquire = require('proxyquireify')(require)
const CSSTransitionGroup = require('./stubs/react_css_transition_group')
const Foo = proxyquire('../src/foo', {
'react-addons-css-transition-group': CSSTransitionGroup
})
/* pseudocode */
test('something about bar', (assert) => {
assert.plan(1)
const foo = el(Foo)
const wrapper = mount(foo)
assert.equal(wrapper.find('p').first().text(), 'bar')
})希望对这个问题的未来读者有所帮助。
Stack Overflow用户
发布于 2016-05-09 16:48:21
我采用的方法是，一方面，使禁用测试中的动画变得容易，另一方面，不需要每个动画组件支持任何特定于测试的参数。
由于我使用的是ClojureScript，所以有些人可能不熟悉语法，但为了更清楚起见，我将对其进行一点注释：
;; By default, in non-unit-test code, animations are enabled.
(def ^:dynamic animations-enabled true)
;; Custom component that essentially wraps React.addons.CSSTransitionGroup,
;; but modifies props passed to it whenever animations-enabled
;; is set to false.
(def css-transition-group
(let [rc-anim-cls (rc/adapt-react-class js/React.addons.CSSTransitionGroup)]
(rc/create-class
{:reagent-render
(fn [anim-spec & children]
(let [anim-spec-2 (if animations-enabled
;; If animations are enabled,
;; pass props through with no change.
anim-spec
;; If animations are disabled,
;; override that in props before passing
;; them to CSSTransitionGroup.
(assoc anim-spec
:transition-enter false
:transition-leave false))]
(into [rc-anim-cls anim-spec-2] children)))})))在常规代码中，该类的使用方式与标准CSSTransitionGroup的使用方式完全相同。
然而，在单元测试中，我可以将animations-enabled绑定为false，并安全地断言要立即添加/删除的DOM元素：
(binding [anim/animations-enabled false]
;; Create component that uses animations. It will not be
;; animated though.
)https://stackoverflow.com/questions/36550906
复制相似问题
腾讯云开发者
