title: Testing a third party library(seadragon) using React
body: <p>I ran into a problem running tests because one of the React components relies on a third party Sea Dragon which renders full-screen images and allows users to zoom in and out. The library interacts with the Dom directly and it's very hard to test.</p>
  
  <p>My component looks like this:</p>
  
  <pre><code>class Viewer extends Component {
    static propTypes = {
      imageUrl: PropTypes.string.isRequired,
      showNavigator: PropTypes.bool
    };
  
    componentDidMount() {
      this.initSeaDragon();
    }
  
    renderZoomControls = () =&gt; {
      return (
        &lt;div className={`${styles.toolbar}`}&gt;
          &lt;button id="zoom-in" className={`${styles.imageControl}`}&gt;
            &lt;span className="icon-search-plus" /&gt;
          &lt;/button&gt;
          &lt;button id="zoom-out" className={`${styles.imageControl}`}&gt;
            &lt;span className="icon-search-minus" /&gt;
          &lt;/button&gt;
          &lt;button id="reset" className={`${styles.imageControl}`}&gt;
            &lt;span className="icon-dot-circle-o" /&gt;
          &lt;/button&gt;
          &lt;button id="full-screen" className={`${styles.imageControl}`}&gt;
            &lt;span className={classNames(styles.mtsIcon, styles.fullscreenIcon)} /&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      );
    };
    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 (
        &lt;div&gt;
          &lt;div id="seadragon" className={styles.container}&gt;
            {this.renderZoomControls()}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Viewer;
  </code></pre>
  
  <p>The problem is that I need to use mount to test so that my life-cycles and render are called. But in doing so, I am getting an error: </p>
  
  <pre><code>TypeError: Cannot read property 'appendChild' of null
  </code></pre>
  
  <p>From experience, I know that the appendChild error message could possibly mean that the div tag with the Id is not being rendered so the library is not finding it. This is my best guess.</p>
  
  <p>My Test looks like this:</p>
  
  <pre><code>import React from 'react';
  import { expect } from 'chai';
  import { mount } from 'enzyme';
  import Viewer from '../viewer';
  
      const wrapper = mount(
        &lt;Viewer
          showNavigator
          imageUrl={'/cleric/resources/UDAU8Z2F4NC7ZDFXA909.png'}
        /&gt;
      );
  
      describe.only('The Viewer should', () =&gt; {
        it('it renders a small navigator window to', () =&gt; {
          console.log(
            wrapper
              .find('#full-screen')
              .simulate('click')
              .debug()
          );
          console.log(wrapper.debug());
        });
      });
  </code></pre>
  
  <p>I am trying to simulate a click and when the image is rendered it applies a full-screen class that I would like to test. </p>