Question

我正在使用CSSTransitionGroup在元素出现在DOM中时，或者当它离开DOM时为元素设置动画。效果很好。

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

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

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

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

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

Answer 1

使用Jest，这是我想出的解决方案。我嘲笑了Transition组件。由于我的导入看起来像import {Transition} from 'react-transition-group'，所以这就是我创建的：

根据我的玩笑配置，将使用在__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”。

**这适用于v2.4.0中的react-transition-group

Answer 2

我相信在基于proxyquire的构建中使用proxyquireify（browserify）有一个更简洁的解决方案。灵感来自之前的答案。

./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')
})

希望能帮助未来读者解决这个问题。

Answer 3

我采用的方法一方面可以轻松地在测试中禁用动画，另一方面 - 不需要每个动画组件支持任何特定于测试的参数。< / p>

由于我使用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.
  )

Answer 4

我有一个非常艰难的时间推理ClojureScript提供的答案，有类似的要求，并指出这似乎是唯一的谷歌结果返回。

以下是我使用sinon解决它的方法：

    transitionGroupStub = sinon.stub(ReactCSSTransitionGroup.prototype, 'render', function () {
        return React.createElement('DIV', null, this.props.children)
    })

基本上将整个css过渡组存根，以便在沿着子项传递的div内部进行渲染。这可能不是很漂亮，但似乎对我的需求非常有效。

Answer 5

根据此plans

react-addons-css-transition-group正在弃用。那么可以改用react-motion吗？

Answer 6

<块引用>

http://reactcommunity.org/react-transition-group/testing/

import { config } from 'react-transition-group'

config.disabled = true

这帮助我摆脱了酶的动画

在测试

6 个答案: