title: How can I get d3 in a React component to render in a Jest snapshot
body: <p>I want to test my d3 code in my react component but I'm currently unable to get it to simply render in a Jest snapshot. Anyone have any ideas on how to accomplish this with Jest? It renders fine when I run the application. </p>
  
  <p>This is the react component:</p>
  
  <p><strong>BarChart.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import * as d3 from 'd3'
  class BarChart extends Component {
     constructor(props){
        super(props)
    this.createBarChart = this.createBarChart.bind(this)
  }
  componentDidMount() {
    this.createBarChart()
  }
  componentDidUpdate() {
    this.createBarChart()
  }
  createBarChart() {
    const node = this.node
    const dataMax = d3.max(this.props.data)
    const yScale = d3.scaleLinear()
       .domain([0, dataMax])
       .range([0, this.props.size[1]]) 
  d3.select(node)
    .selectAll('rect')
    .data(this.props.data)
    .enter()
    .append('rect')
  
  d3.select(node)
    .selectAll('rect')
    .data(this.props.data)
    .exit()
    .remove()
  
  d3.select(node)
    .selectAll('rect')
    .data(this.props.data)
    .style('fill', '#fe9922')
    .attr('x', (d,i) =&gt; i * 25)
    .attr('y', d =&gt; this.props.size[1] - yScale(d))
    .attr('height', d =&gt; yScale(d))
    .attr('width', 25)
  }
  render() {
    return &lt;svg ref={node =&gt; this.node = node}
    width={500} height={500}&gt;
    &lt;/svg&gt;
  }
  }
  export default BarChart
  </code></pre>
  
  <p>This is the jest test to create a snapshot:</p>
  
  <p><strong>BarChart-test.js</strong></p>
  
  <pre><code>import React from 'react';
  import BarChart from './BarChart';
  import renderer from 'react-test-renderer';
  
  describe('BarChart', () =&gt; {
    it('renders correctly', () =&gt; {
      const tree = renderer
        .create(
          &lt;BarChart data={[5,10,1,3]} size={[500,500]} /&gt;
        )
        .toJSON();
      expect(tree).toMatchSnapshot();
    });
  });
  </code></pre>
  
  <p>This is the generated snapshot from jest which includes none of the D3 code that should render to display the bar chart. </p>
  
  <p><strong>BarCart-test.js.snap</strong></p>
  
  <pre><code>// Jest Snapshot v1
  
  exports[`BarChart renders correctly 1`] = `
  &lt;svg
    height={500}
    width={500}
  /&gt;
  `;
  </code></pre>