[Vuejs]-DOM modification in mounted method not in JEST snapshot

by

0👍

✅

I did several things to fix this:

1) No longer using d3.select.attr to modify svg and g.chart attributes in mounted. I modified those attributes via props instead

2) In the original code, after this line:

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

I had a gradient arc generation via 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;
  });

This also didn’t get to the snapshot. Even after point 1 above was done. I moved this gradient arc generation into a new component’s mounted method. And suddenly it started working. shallow on the new component created the markup correctly. Notice how in the new component, I still use d3.selectAll…but this time it works as expected

So this does not answer the previous issue but maybe refactoring the component’s mounted method a bit will help.

0👍

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

As found in https://github.com/vuejs/vue-test-utils/issues/369 helped me. I had to add
wrapper.destroy() at the end to remove the rendered elements from the document and destroy the component instance. https://vue-test-utils.vuejs.org/api/options.html#attachtodocument

Leave a comment