4

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

放置库基本上使用“放置目标”和“放置内容”元素，这样当某些鼠标事件发生在“目标”上时，它会显示“内容”。它通过向目标添加一个 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