Question

我想在我的react组件中测试我的d3代码，但我目前无法简单地在Jest快照中进行渲染。任何人对如何使用Jest完成此任务有任何想法？它在我运行应用程序时渲染得很好。

这是反应组成部分：

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

这是创建快照的最佳测试：

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

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

1 个答案: