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属性。你可以将元素作为ref来渲染它。

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

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

您必须保存OpenSeadragon调用返回的查看器，因此您可以通过这种方式使用它。

使用React

1 个答案: