4

反応を使用してドロップ ライブラリの非常に単純なラッパーを作成しました。酵素を使用してテストしようとしています。

ドロップ ライブラリは基本的に「ドロップ ターゲット」要素と「ドロップ コンテンツ」要素を使用し、特定のマウス イベントが「ターゲット」に発生したときに「コンテンツ」を表示するようにします。これは、コンテンツを表示するために css 遷移メカニズムで使用される css クラスをターゲットに追加することによって行われます。

だから...私がテストしようとしていたのは、いくつかのマウスイベントが発生したときに、いくつかのcssクラスがいくつかの要素に追加されるということです。

コンポーネント自体は次のとおりです。

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import Drop from 'tether-drop'
import _ from 'lodash'
import 'tether-drop/dist/css/drop-theme-arrows.css'

export default class extends Component {

  componentDidMount() {
    this.drop = new Drop(
      _.extend(
        {
          target: ReactDOM.findDOMNode(this.dropTarget),
          content: ReactDOM.findDOMNode(this.dropContent),
          classes: 'drop-theme-arrows',
          position: 'right middle',
          openOn: 'hover',
          constrainToScrollParent: false
        },
        this.props.opts
      )
    )
  }

  render() {
    const target = React.cloneElement(this.props.children[0], {ref: (c) => this.dropTarget = c})
    const content = React.cloneElement(this.props.children[1], {ref: (c) => this.dropContent = c})

    return (
      <div>
        {target}
        {content}
      </div>
    )
  }
}

これがテストです(モカ、チャイ、酵素を使用):

import {expect} from 'chai'
import React from 'react'
import {mount} from 'enzyme'
import Drop from '../src'

describe('Drop', () => {
  let wrapper = null

  beforeEach(() => {
    wrapper = mount(
      <Drop>
        <div>target</div>
        <div>content</div>
      </Drop>
    )
  })

  it('should kinda work', () => {
    const dropTargetWrapper = wrapper.find('.drop-target')
    expect(dropTargetWrapper).to.have.length(1)
    expect(dropTargetWrapper.hasClass('drop-target')).to.equal(true)
    dropTargetWrapper.simulate('mouseover')
    expect(dropTargetWrapper.hasClass('drop-enabled')).to.equal(true)
  })

})

最後のexpectステートメントはfalse、予想される重要なクラス ( drop-enabled) が「ドロップ ターゲット」に表示されないという点です。

github リポジトリ全体は、参照用にここで見つけることができます

酵素を使用してこのテストに正しくアプローチする方法について、誰かがガイダンスを提供できますか?

4

0 に答える 0