1

我在运行测试时遇到了问题，因为其中一个 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());
      });
    });

我正在尝试模拟单击，当图像被渲染时，它会应用我想测试的全屏类。

4

1 回答 1

0

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

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

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

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

于 2018-04-05T21:19:51.263 回答