Тестирование сторонней библиотеки (seadragon) с использованием React

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 может означать, что тег 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 возврат вызовов, так что вы можете использовать его здесь таким образом.