VueJS默认道具工厂功能和测试范围

问题描述

在这里面对一个非常非常烦人的问题。

在此处考虑示例Vue组件：

@inject IJSRuntime _js

@code {
    static List<object> items = new List<object>();

    [JSInvokable]
    public static Task LoadItems()
    {
        try
        {
            Console.WriteLine("Loading items");
            items = new List<object>();
        }
        catch (Exception ex)
        {
        }

        return Task.CompletedTask;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await _js.InvokeVoidAsync("netFromJs.static");
    }
}

当我使用vue-test-utils运行单元测试并显示覆盖率时，覆盖率报告会显示未覆盖根据Vue规范要求使用工厂函数返回默认prop值的行

这当然降低了测试覆盖率，这影响了我推送代码的能力。特别是对于较小的组件，此匿名工厂功能将占功能覆盖率的50％！

我尝试过的事情：

定义助手功能：

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

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

并以此方式使用：

function resolveProp(args) {
 return args;
}

但是，不包括resolveProp函数。我不想为每个组件文件编写此功能和随附的单元测试。

因此，我想我可以尝试使用相关单元测试将helper函数安装为mixin或Vue插件。但是，当然，我需要通过<script> export default { name: 'MyComponent',components: {},default: resolveProp({}),default: resolveProp([]),} </script>来引用它，而当我需要解析道具时，this不可用！

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

我运行的测试命令是this，我相信它只是在开玩笑。

我可以在vue-cli-service test:unit中放一些东西来忽略它吗？

预先感谢

解决方法

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

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

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

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

unit-testing vue-test-utils vue.js