How can I get d3 in a React component to render in a Jest snapshot

Question

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.

This is the react component:

BarChart.js

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) => i * 25)
  .attr('y', d => this.props.size[1] - yScale(d))
  .attr('height', d => yScale(d))
  .attr('width', 25)
}
render() {
  return <svg ref={node => this.node = node}
  width={500} height={500}>
  </svg>
}
}
export default BarChart

This is the jest test to create a snapshot:

BarChart-test.js

import React from 'react';
import BarChart from './BarChart';
import renderer from 'react-test-renderer';

describe('BarChart', () => {
  it('renders correctly', () => {
    const tree = renderer
      .create(
        <BarChart data={[5,10,1,3]} size={[500,500]} />
      )
      .toJSON();
    expect(tree).toMatchSnapshot();
  });
});

This is the generated snapshot from jest which includes none of the D3 code that should render to display the bar chart.

BarCart-test.js.snap

// Jest Snapshot v1

exports[`BarChart renders correctly 1`] = `
<svg
  height={500}
  width={500}
/>
`;

Answer 1

I was able to find a npm package that works nicely for this use case: react-faux-dom Here is the updated code that now renders the d3 code in the snapshot.

BarChar.js

import React, { Component } from 'react'
import * as d3 from 'd3'
import ReactFauxDOM from 'react-faux-dom';

class BarChart extends Component {
   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]])

   // Use Faux DOM to create an SVG tag
   let nodeLoader = ReactFauxDOM.createElement('svg');

   d3.select(nodeLoader)
      .selectAll('rect')
      .data(this.props.data)
      .enter()
      .append('rect')

   d3.select(nodeLoader)
      .selectAll('rect')
      .data(this.props.data)
      .exit()
      .remove()

   d3.select(nodeLoader)
      .selectAll('rect')
      .data(this.props.data)
      .style('fill', '#fe9922')
      .attr('x', (d,i) => i * 25)
      .attr('y', d => this.props.size[1] - yScale(d))
      .attr('height', d => yScale(d))
      .attr('width', 25)


      return nodeLoader.toReact();
   }
render() {
      return <div>{this.createBarChart()}</div>
   }
}
export default BarChart

Using the same test this is now the new snapshot.

BarChart.js.snap

// Jest Snapshot v1

exports[`BarChart renders values correctly 1`] = `
<div>
<svg
    style={Object {}}
  >
    <rect
      height={250}
      style={
        Object {
          "fill": "#fe9922",
        }
      }
      width={25}
      x={0}
      y={250}
    />
    <rect
      height={500}
      style={
        Object {
          "fill": "#fe9922",
        }
      }
      width={25}
      x={25}
      y={0}
    />
    <rect
      height={50}
      style={
        Object {
          "fill": "#fe9922",
        }
      }
      width={25}
      x={50}
      y={450}
    />
    <rect
      height={150}
      style={
        Object {
          "fill": "#fe9922",
        }
      }
      width={25}
      x={75}
      y={350}
    />
  </svg>
</div>
`;