使用React测试第三方库（seadragon）

Question

我遇到了运行测试的问题，因为React组件之一依赖于第三方Sea Dragon，后者呈现全屏图像并允许用户放大和缩小。 该库直接与Dom交互，很难测试。

我的组件看起来像这样：

class Viewer extends Component {
  static propTypes = {
    imageUrl: PropTypes.string.isRequired,
    showNavigator: PropTypes.bool
  };

  componentDidMount() {
    this.initSeaDragon();
  }

  renderZoomControls = () => {
    return (
      <div className={`${styles.toolbar}`}>
        <button id="zoom-in" className={`${styles.imageControl}`}>
          <span className="icon-search-plus" />
        </button>
        <button id="zoom-out" className={`${styles.imageControl}`}>
          <span className="icon-search-minus" />
        </button>
        <button id="reset" className={`${styles.imageControl}`}>
          <span className="icon-dot-circle-o" />
        </button>
        <button id="full-screen" className={`${styles.imageControl}`}>
          <span className={classNames(styles.mtsIcon, styles.fullscreenIcon)} />
        </button>
      </div>
    );
  };
  initSeaDragon() {
    const { imageUrl, showNavigator } = this.props;

    OpenSeadragon({
      id: 'seadragon',
      zoomInButton: 'zoom-in',
      zoomOutButton: 'zoom-out',
      homeButton: 'reset',
      fullPageButton: 'full-screen',
      tileSources: {
        type: 'image',
        url: '/cleric/resources/UDAU8Z2F4NC7ZDFXA909.png',
        buildPyramid: false
      },
      showNavigator: showNavigator
    });
  }
  render() {
    return (
      <div>
        <div id="seadragon" className={styles.container}>
          {this.renderZoomControls()}
        </div>
      </div>
    );
  }
}

export default Viewer;

问题是我需要使用mount进行测试，以便调用我的生命周期和渲染。 但是这样做时出现错误：

TypeError: Cannot read property 'appendChild' of null

根据经验，我知道appendChild错误消息可能意味着未呈现具有ID的div标记，因此库无法找到它。 这是我最好的猜测。

我的测试如下所示：

import React from 'react';
import { expect } from 'chai';
import { mount } from 'enzyme';
import Viewer from '../viewer';

    const wrapper = mount(
      <Viewer
        showNavigator
        imageUrl={'/cleric/resources/UDAU8Z2F4NC7ZDFXA909.png'}
      />
    );

    describe.only('The Viewer should', () => {
      it('it renders a small navigator window to', () => {
        console.log(
          wrapper
            .find('#full-screen')
            .simulate('click')
            .debug()
        );
        console.log(wrapper.debug());
      });
    });

我正在尝试模拟点击，并在渲染图像时应用了我要测试的全屏课程。

Answer 1

我在OpenSeadragon上工作，但是我没有在React上使用它的任何经验。 无论如何，如果在与div连接时遇到问题，一种选择是将元素直接传递到OpenSeadragon中，而不是通过ID进行引用。 代替id属性，使用element属性。 您可以从渲染元素中获取该元素作为参考。

要记住的另一件事是OpenSeadragon初始化是异步的。 如果您想知道何时准备就绪，请使用：

viewer.addHandler('open', function() {
    // Ready
});

您必须保存OpenSeadragon调用返回的查看器，因此可以在此处使用它。