使用React测试第三方库(Seadragon)

Question

我在运行测试时遇到了问题，因为其中一个React组件依赖第三方海龙，它呈现全屏图像并允许用户放大和缩小。库直接与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;

问题是，我需要使用挂载来测试，以便调用我的生命周期和呈现。但在这样做时，我得到了一个错误：

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，但是我没有使用它的经验。无论如何，如果它与div连接有问题，一个选项是直接将元素传递到OpenSeadragon，而不是通过ID引用它，而不是用element属性代替id属性。您可以通过呈现元素作为参考。

要记住的另一件事是，OpenSeadragon初始化是异步的。如果您想知道它什么时候准备好了，请使用：

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

您必须保存OpenSeadragon调用返回的查看器，这样您就可以这样使用它了。