10

CSSTransitionGroup当元素出现在 DOM 中或离开 DOM 时，我使用它来为元素设置动画。它运作良好。

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

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

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

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

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

4

6 回答 6

5

使用 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

于 2018-08-02T23:58:58.067 回答
3

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

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

config.disabled = true

这帮助我摆脱了酶的动画

于 2021-05-27T17:04:36.720 回答
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')
})

希望对这个问题的未来读者有所帮助。

于 2016-11-17T15:52:49.083 回答
0

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

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

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

基本上将整个 css 过渡组存根，以在 div 内渲染，沿子级传递。这可能不漂亮，但它似乎很适合我的需要。

于 2016-11-04T19:21:16.047 回答
0

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

由于我使用 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.
  )
于 2016-05-09T08:48:21.060 回答
-1

按照这个计划

react-addons-css-transition-group 正在弃用。所以也许使用react-motion代替？

于 2017-04-04T16:31:46.260 回答