这是我参与「第五届青训营」伴学笔记创作活动的第 5 天

jest测试文件出现渲染错误 TypeError: Cannot set properties of undefined (setting 'hasOwnProperty')

渲染结果：
1. mount：踏踏实实的渲染，会将被测试组件中使用到的子子孙孙组件完全渲染。最终结果内肯定不存在自定义组件名作为标签名，包括插件提供的V-btn之类的dom结构，全部不存在，彻底渲染到<div><span><p>之类
2. shallowMount：浅渲染，与mount相反，既不会渲染子组件，更不用提孙子辈的组件，仅限测试组件本身。子组件会原原本本的显示子组件的存根，当使用stubs的时候，子组件存根是可以自定义显示内容的，如果未自定义，将会显示子组件名-stub的标签名，如<my-componet-stub></my-componet-stub>

渲染结果总结

mount刨根问底，祖宗十八代都不会放过，shallowMount仅限测试组件，不牵扯子组件内容使用场景：

mount：多数情况出现在snapshot中使用，而且也只是部分snapshot中必须使用mount。下面将说明何种情况：当被测试组件内包含子组件，且子组件的dom结构通过slot在被测试组件内定义的时候，必须使用mount来测试snapshot。
shallowMount：所有必须使用mount的情况以外都使用shallowMount，使用mount将更大的消耗时间和性能， ----> 实际上所有测试都可以不使用mount，但是鉴于测试的复杂性，有可能会出现用shallowMount怎么也报错的情况，但是改成mount就能测试通过

解决：把shallowmount改成mount API | Vue Test Utils

但实际上，这个问题的本质是因为shallowmount将组件类型认为是Component Instance

mount返回一个VueWrapper，其中包含许多测试Vue组件的方便方法。有时您可能需要访问底层Vue实例。您可以使用vm属性访问它。Let's take a look at what's available on vm by with console.log(wrapper.vm):

{
    msg1: [Getter/Setter],
    msg2: [Getter/Setter],
    hasOwnProperty: [Function]
}

解决TypeError: Cannot set properties of undefined ｜ 青训营笔记