0

我有一个 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 + ")")

我正在使用jestand测试这个组件vue-test-util

我的测试如下所示：

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

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

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

我试过了nextTick，安装jest.useFakeTimers()，shallow没有什么能满足我的需求。

谢谢

4

2 回答 2

0

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

1) 不再d3.select.attr用于修改 mounted中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方法会有所帮助。

于 2018-02-09T08:03:21.767 回答
0 
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

于 2020-01-02T14:23:09.703 回答