Question

我想测试使用D3的组件，该组件报告mouseMove事件的主管相对坐标。这个组件在浏览器中按预期工作 - 我有一个简单的回调记录坐标和一个＆＃39;鼠标移动＆＃39;事件也被记录：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { mouse, select } from 'd3-selection';

class Overlay extends Component {
  _handleMouseMove(coordinates, callback) {
    console.log('Mouse moved');
    callback(coordinates);
  }

  componentDidMount() {
    this.renderD3Move();
  }
  componentDidUpdate() {
    this.renderD3Move();
  }

  renderD3Move() {
    const handleMouseMove = this._handleMouseMove;
    const callback = this.props.callback;
    const node = ReactDOM.findDOMNode(this);
    select(node).on('mousemove', function handleMouse() {
      handleMouseMove(mouse(node), callback);
    });
  }

  render() {
    return (
      <rect
        className="overlay"
        height={this.props.height}
        width={this.props.width}
      />
    );
  }
}

export default Overlay;

尽管如此，我还是无法编写一个触发回调的测试，甚至无法将鼠标移到＆＃39;要记录的消息：

import chai from 'chai';
chai.should();
import React from 'react';
import { mount } from 'enzyme';
import sinon from 'sinon';
import Overlay from '.';

describe('<Overlay />', function() {
  var height = 50,
    width = 50;

  it('passes mouse coordinates when mouse moves', function() {
    const callback = sinon.spy();
    var wrapper = mount(
      <Overlay height={height} width={width} callback={callback} />
    );
    wrapper.find('Overlay').simulate('mousemove');
    wrapper.find('rect').simulate('mousemove');
    wrapper.find('Overlay').simulate('mouseMove');
    wrapper.find('rect').simulate('mouseMove');
    callback.called.should.equal(true);
  });
}

我的问题是：

有没有办法从测试中触发组件中的mouseMove？
如果是这样，我还可以测试mouseMove事件的坐标吗？
如果与我实现组件的方式存在根本的不兼容性，那么如何确定mouseMove事件相对于可以轻松测试的节点的坐标是否有最佳实践？

相关问题并未完全解决我的问题

如何在d3组件上模拟mouseMove以进行反应测试

0 个答案: