VueJS 默认 props 工厂函数和测试覆盖率答案

【问题标题】：VueJS Default props factory function and test coverageVueJS 默认 props 工厂函数和测试覆盖率
【发布时间】：2021-02-03 12:09:05
【问题描述】：

在这里遇到一个非常非常非常烦人的问题。

在这里考虑一个示例 Vue 组件：

<template>
   <div>
    Some arbitrary html elements here
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    myObjectProp: {
      type: Object,
      default: () => {},
    },
    myArrayProp: {
      type: Array,
      default: () => [],
    },
  },
}
</script>

当我使用 vue-test-utils 运行单元测试并显示覆盖率时，覆盖率报告显示我使用工厂函数返回默认属性值的行，如 Vue 规范中所要求的那样，未涵盖.

这当然会降低测试覆盖率，从而影响我推送代码的能力。特别是对于较小的组件，这个匿名工厂函数将占 funcs 覆盖率的 50%！

我尝试过的：

定义辅助函数：

function resolveProp(args) {
 return args;
}

这样使用：

<script>
export default {
  name: 'MyComponent',
  components: {},
  props: {
    myObjectProp: {
      type: Object,
      default: resolveProp({}),
    },
    myArrayProp: {
      type: Array,
      default: resolveProp([]),
    },
  },
}

</script>

但是，resolveProp 函数没有被覆盖。我不想为每个组件文件编写这个函数和附带的单元测试。

所以，我想我可以尝试将辅助函数安装为带有相关单元测试的 mixin 或 Vue 插件。但当然，我需要通过this 引用它，而当我需要解析prop 时，this 不可用！

有什么想法可以抑制这个问题或告诉我的测试运行者完全忽略它吗？

我运行的测试命令是vue-cli-service test:unit，我相信它只是在开玩笑。

我可以在我的jest.config.js 中输入什么来忽略它吗？

提前致谢

【问题讨论】：

您的示例中的组件是否会发生这种情况？我复制了组件，添加了一个测试，除了安装它之外什么都不做，并且它具有完整的覆盖范围。向其添加方法后，覆盖率下降了。
它发生在我需要工厂函数来解析道具的所有组件中

标签： unit-testing vue.js vue-test-utils

【解决方案1】：

我试图为我在测试覆盖率中遇到的一个类似问题找到答案，我无法得到 100% 的测试覆盖，因为应该测试默认函数。在 SO 上找不到任何内容。

经过一些尝试，我找到了如何测试默认值的解决方案。不确定是否会帮助你，但解决了我的问题：

expect(wrapper.vm.$options.props.myObjectProp.default.call()).toEqual([])

expect(wrapper.vm.$options.props.myArrayProp.default.call()).toEqual([])

【讨论】：