title: Testing D3 inside a functional component with Jest and Enzyme
body: <p>I'm trying to test the creation of a scatter chart created inside a functional component.  I've tried a bunch of packages:
  Jest/Enzyme, Cheerio,  react-test-renderer,  testing-library, to name a few.</p>
  <p>the html looks like this:</p>
  <pre><code> &lt;div className=&quot;outerDiv&quot; data-test='scatterchart'&gt;
      &lt;div ref={wrapperRef} className=&quot;corrD3_wrapperDiv&quot;&gt;
        &lt;svg ref={svgRef} className=&quot;corrD3_svgBox&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
          &lt;defs&gt;
            &lt;clipPath id={chartId}&gt;
              &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;100%&quot; height=&quot;100%&quot; /&gt;
            &lt;/clipPath&gt;
          &lt;/defs&gt;
          &lt;g className=&quot;x-axis&quot; /&gt;
          &lt;g className=&quot;y-axis&quot; /&gt;
          &lt;g className=&quot;content&quot; clipPath={`url(#${chartId})`} /&gt;
        &lt;/svg&gt;
      &lt;/div&gt;
    &lt;/div &gt;
  </code></pre>
  <p>D3 is generated inside a useEffect.</p>
  <p>I mock up the useEffect in my test code:</p>
  <pre><code>const mockUseEffect = () =&gt; {
    useEffect.mockImplementation(f =&gt; f());
  };
  
  useEffect = jest.spyOn(React, 'useEffect');
  mockUseEffect();
  </code></pre>
  <p>I run the tests inside a timeout to allow for the useEffects.
  found on StackOverflow:</p>
  <pre><code>// This is helper that I'm using to wrap test function calls
  const withTimeout = (done, fn) =&gt; {
   const timeoutId = setTimeout(() =&gt; {
      fn();
      clearTimeout(timeoutId);
      done();
    });
  };
  
  
  it('Should load component after timeout', done =&gt; withTimeout(done, () =&gt; {
    let component;
    component = mount(&lt;Scatter2 {...props} /&gt;)
    const $ = cheerio.load(component.html());
  
    expect($('svg')).toHaveLength(1);
    expect($('circle')).toHaveLength(20);  &lt;-- FAILS
  })); 
  </code></pre>
  <p>No matter what I do I can't get the D3 to generate before the test runs.</p>
  <p>Does anybody have any suggestions as to what I can do?
  I cannot figure this out.</p>
  <p>Thanks,
  Jed K</p>