首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在测试中禁用React的CSSTransitionGroup

在测试中禁用React的CSSTransitionGroup
EN

Stack Overflow用户
提问于 2016-04-11 21:59:35
回答 5查看 4.1K关注 0票数 9

当元素出现在DOM中或离开DOM时,我使用CSSTransitionGroup对元素进行动画处理。它工作得很好。

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

问题:应用了动画类,组件一直保留在DOM中,直到动画结束。这意味着我的测试也应该等待几百毫秒,然后我才能断言该元素已经消失。我不能这样做--我希望我的测试速度快,因为这些都是单元测试。

这个问题:有没有一种方法可以在不向组件添加额外选项的情况下禁用CSS转换?

我尝试了什么:单元测试本身运行良好。我可以通过向我的组件传递一个参数,使其不使用CSSTransitionGroup来消除动画。所以--最坏的情况--我就这么做。但我在寻找一个更好的解决方案。

我还可以断言,有问题的元素上存在"-enter"/"-enter-active"/"-leave"/"-leave-active“类。这似乎有点老生常谈,因为我可以想象一个bug,其中将应用这些类,但元素将保留在DOM中。我不想求助于这种方法。

EN

回答 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

代码语言:javascript
复制
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

代码语言:javascript
复制
import React from 'react'

export default (props) => (
  <div>
    {props.in ? props.children() : null}
  </div>
)

这样,孩子就会立即被渲染-- "Transition“几乎被禁用。

**适用于react-transition-groupv2.4.0

票数 5
EN

Stack Overflow用户

发布于 2016-11-17 23:52:49

我相信有一个更简洁的解决方案使用proxyquire (在我的基于browserify的构建中使用proxyquireify)。受到前面答案的启发。

./stubs/react_css_transition_group.js

代码语言:javascript
复制
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

代码语言:javascript
复制
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')
})

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

票数 2
EN

Stack Overflow用户

发布于 2016-05-09 16:48:21

我采用的方法是,一方面,使禁用测试中的动画变得容易,另一方面,不需要每个动画组件支持任何特定于测试的参数。

由于我使用的是ClojureScript,所以有些人可能不熟悉语法,但为了更清楚起见,我将对其进行一点注释:

代码语言:javascript
复制
;; 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元素:

代码语言:javascript
复制
(binding [anim/animations-enabled false]
  ;; Create component that uses animations. It will not be
  ;; animated though.
  )
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36550906

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档