Vue Mocha 测试：wrapper.setProps({}) 不会更新嵌套的 Components 道具答案

【问题标题】：Vue Mocha test: wrapper.setProps({}) does not update nested Components propsVue Mocha 测试：wrapper.setProps({}) 不会更新嵌套的 Components 道具
【发布时间】：2020-04-03 14:55:54
【问题描述】：

我是这个Vue.js Plugin 的开发者，目前正在测试 v1.0.0，使用已经为旧版本编写的测试并进行了一些调整。

场景

测试具有以下结构的组件：

// receives props and passes through
VueEllipseProgress
    // receives props, adds new and passes through
   EpCircleContainer
      // receives props and do main SVG rendering
      CircleProgress

使用工厂函数：

// this is the top level VueEllipseProgress component
import Container from "../../../src/components/VueEllipseProgress.vue";
import Circle from "../../../src/components/Circle/CircleProgress.vue";

const factory = propsData => {
  return mount(Container, {
    propsData: {
      ...propsData
    }
  });
};

const wrapper = factory({...})

在测试中使用wrapper.setProps() 来应用新的道具。测试，改变的道具如何影响另一端的 SVG 元素的渲染。你可以在GitHub看到整个代码。

问题

wrapper.setProps() 正确更新了 VueEllipseProgress（顶级）的 props，wrapper.vm.$props 具有预期值。但是 CircleProgress 组件的 props 保持不变，HTML 仍然没有更新。这会导致测试失败。

it("do some test", () => {

      /* do some test here, all is fine */

      wrapper.setProps({ someProp}); // set new props
      wrapper.vm.someProp; // updated

      circleWrapper.vm.someProp; // still old

      // fails!!!
      expect(circleWrapper.element.getAttribute("someProp")).to.equal(someProp);
    });

Here是与上述示例相关的更多代码细节。

请注意，插件可以正常工作，并且所有道具都是reactive。

该测试适用于我的插件的早期版本。与此同时，我已经将@vue/cli 更新到了 4.x.x 版本。也许失败与此更新有关，但我在发行说明中找不到任何可以证实这一点的信息。

【问题讨论】：

标签： unit-testing vue.js vuejs2 mocha.js

【解决方案1】：

这不是直接的解决方案，更多的是避免问题的提示。在我的组件中，我使用v-binde="$props" 将道具传播到子组件。但是，这可能会导致 jsdom 出现问题，就像我的情况一样。

我最终通过直接测试每个组件来重构我的所有测试，避免了嵌套结构和 props 传播的需要（就像单元测试应该那样）。

【讨论】：