使用 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());
      });
    });

我正在尝试模拟点击，当图像呈现时它会应用我想要测试的全屏 class。

Answer 1

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

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

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

您必须保存 OpenSeadragon 调用 returns 的查看器，这样您才能在这里使用它。

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

Testing a third party library(seadragon) using React

chai

reactjs

openseadragon

enzyme