Question

我有一个Vue组件，在mounted方法中我有这个：

this.el = d3.select(this.$el);
this.svg = this.el.select('svg')
        .attr('width', mainSvgPos.svgWidth)
        .attr('height', mainSvgPos.svgHeight)
        .attr('viewBox', "0 0 " + mainSvgPos.svgWidth + " " + mainSvgPos.svgHeight)
        .attr('style',"position:absolute;left:0;top:20px;width:100%;height:100%")   
this.chart = this.svg.select('g.chart').attr('transform', "translate(" + chartCenter.leftOffset + ", " + chartCenter.topOffset + ")")

我正在使用jest和vue-test-util

测试此组件

我的测试看起来像这样：

describe('gauge', () => {
  const wrapper = shallow(gauge, {
    propsData: ...some data,
  })
  it('renders correctly', () => {
    expect(wrapper.vm.$el).toMatchSnapshot()
  });
})

当它第一次运行时，正如预期的那样，它会创建shapshot。在这个快照中，我有父svg元素，所有属性设置正确（宽度，高度，视图框，样式）。但是g.chart元素不包含任何属性（它应包含transform）。 mount方法之后使用D3语法创建了一堆其他元素（我没有在这里粘贴它们）......没有一个在快照中。

所以我的问题是this.svg = this.el.select('svg')...中发生了什么阻止正确创建快照以及如何解决这个问题。

我已尝试nextTick，jest.useFakeTimers()，shallow安装，没有任何东西能给我我想要的东西。

由于

Answer 1

我做了几件事来解决这个问题：

1）不再使用d3.select.attr修改已装入的svg和g.chart属性。我通过道具修改了这些属性

2）在原始代码中，在此行之后：

this.chart = this.svg.select('g.chart').attr('transform', "translate(" + chartCenter.leftOffset + ", " + chartCenter.topOffset + ")")

我通过d3生成了渐变弧：

const arc = d3.arc()
          .innerRadius(this.arc_radius - this.chart_inset - this.bar_width)
          .outerRadius(this.arc_radius - this.chart_inset)
          .startAngle(function (d) {
            return d.startAngle;
          }).endAngle(function (d) {
            return d.endAngle;
          });

  d3.select(this.$el).append('g').selectAll('path').data(this.pieces).enter()
    .append('path').attr("d", arc)
    .attr("stroke-width", 1).attr("stroke", function (d) {
    return d.fill;
  }).attr("fill", function (d) {
    return d.fill;
  });

这也没有进入快照。即使在上面的第1点完成之后。我将此渐变弧生成移动到新组件的mounted方法中。突然间它开始工作了。新组件上的shallow正确创建了标记。请注意，在新组件中，我仍然使用d3.selectAll ...但这次它按预期工作

所以这不能解决上一个问题，但可能会对组件的mounted方法进行重构会有所帮助。

Answer 2

test('the d3 svg chart renders with the component', () => {
    const wrapper = mount(D3Chart, {
      attachToDocument: true,
    });
    expect(wrapper.html()).to.contain('svg');
    wrapper.destroy();
  });

https://github.com/vuejs/vue-test-utils/issues/369中的内容对我有所帮助。我必须添加最后，将wrapper.destroy（）从文档中删除呈现的元素并销毁组件实例。 https://vue-test-utils.vuejs.org/api/options.html#attachtodocument

安装方法中的DOM修改不在JEST快照中

2 个答案: