反応を使用してドロップ ライブラリの非常に単純なラッパーを作成しました。酵素を使用してテストしようとしています。
ドロップ ライブラリは基本的に「ドロップ ターゲット」要素と「ドロップ コンテンツ」要素を使用し、特定のマウス イベントが「ターゲット」に発生したときに「コンテンツ」を表示するようにします。これは、コンテンツを表示するために 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 リポジトリ全体は、参照用にここで見つけることができます
酵素を使用してこのテストに正しくアプローチする方法について、誰かがガイダンスを提供できますか?