我可以测试使用Enzyme通过模拟事件添加css类吗？

Question

我使用react为drop library创建了一个非常简单的包装器， 我正在尝试使用enzyme进行测试。

drop库基本上使用“drop target”和“drop content”元素，这样当某些鼠标事件发生在“target”时，它就会显示“content”。它通过向目标添加一个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仓库here以供参考

任何人都可以提供有关如何使用酶正确接近此测试的任何指导吗？