10

CSSTransitionGroup要素がDOMに表示されるとき、またはDOMを離れるときに要素をアニメーション化するために使用しています。それはうまくいきます。

今 - このコンポーネントを単体テストしたいと思います。一時的な DOM ノードを作成して にアタッチし<body>、コンポーネントをそこにレンダリングしてから、いくつかのアクションを実行します。その結果、子 DOM ノードが消えることが予想されます。

問題: アニメーション クラスが適用され、コンポーネントは CSS アニメーションが終了するまで DOM に保持されます。これは、その要素がなくなったことをアサートする前に、テストも数百ミリ秒待機する必要があることを意味します。私はそれを行うことはできません.単体テストであるため、テストを高速にしたいと考えています。

質問: コンポーネントにオプションを追加せずに CSS トランジションを無効にする方法はありますか?

私が試したこと： ユニットテスト自体はうまくいきます。を使用しないようにするパラメーターをコンポーネントに渡すことで、アニメーションを取り除くことができますCSSTransitionGroup。だから - 最悪のシナリオ - 私はそうします。しかし、私はより良い解決策を探しています。

「-enter」/「-enter-active」/「-leave」/「-leave-active」クラスが問題の要素に存在すると断言することもできます。これらのクラスが適用されるバグを想像することができたので、それは少しハックに思えますが、要素は DOM に残ります。私はこのアプローチに頼らないことを望みます。

4

6 に答える 6

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 を使用しているため、構文に慣れていない人もいるかもしれませんが、わかりやすくするために少しコメントします。

;; 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で使用されます。

ただし、単体テストでは、すぐに追加/削除される DOM 要素をas としてバインドanimations-enabledし、安全にアサートできます。false

(binding [anim/animations-enabled false]
  ;; Create component that uses animations. It will not be
  ;; animated though.
  )
于 2016-05-09T08:48:21.060 に答える