javascript - 如何在 React 组件中获取 d3 以在 Jest 快照中呈现

Question

我想在我的 React 组件中测试我的 d3 代码，但我目前无法让它简单地呈现在 Jest 快照中。有人对如何用 Jest 完成这个有任何想法吗？当我运行应用程序时它呈现良好。

这是 react 组件:

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

这是创建快照的 Jest 测试:

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();
  });
});

这是从 jest 生成的快照，其中不包含应呈现以显示条形图的任何 D3 代码。

BarCart-test.js.snap

// Jest Snapshot v1

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

Answer 1

我能够找到一个非常适合这个用例的 npm 包:react-faux-dom 这是更新后的代码，现在在快照中呈现 d3 代码。

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

使用相同的测试，这是现在的新快照。

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>
`;