【笔记】mount与shallowMount的区别

[holylovelqq]

结论写在最开始：尽一切努力使用shallowMount，远离mount

在Vue Test Utils官网的shallowMount和常用技巧中分别都提到了下面的话

和 mount 一样，创建一个包含被挂载和渲染的 Vue 组件的 Wrapper，不同的是被存根的子组件。

Vue Test Utils 允许你通过 shallowMount 方法只挂载一个组件而不渲染其子组件 (即保留它们的存根)

这已经是两者区别的官网介绍的全部。我敢肯定只看这两句话肯定是一头雾水，任你vue技术再好水平再高，不通过实际单测实践，是完全不能理解其中的奥秘的。

此篇笔记将揭开mount和shallowMount之间不可告人的秘密
写这种零散笔记完全是因为没有时间更新仓库内容，对单测有兴趣的就将就着看吧。

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

渲染结果总结

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

2. 使用场景：
   1. mount：多数情况出现在snapshot中使用，而且也只是部分snapshot中必须使用mount。下面将说明何种情况：当被测试组件内包含子组件，且子组件的dom结构通过slot在被测试组件内定义的时候，必须使用mount来测试snapshot。

追加说明：此种情况也是可以使用shallowMount的，做法为：

import myComponent from '~/myComponent'
...
options:{
  ...
  stubs:{ myComponent }
}

//被测试组件内
...
<my-component>
  <template #body>
    <div>
      自定义内容
    </div>
  </template>
</my-component>
...

2. shallowMount：所有必须使用mount的情况以外都使用shallowMount，使用mount将更大的消耗时间和性能，
   ----> 实际上所有测试都可以不使用mount，但是鉴于测试的复杂性，有可能会出现用shallowMount怎么也报错的情况，但是改成mount就能测试通过

使用场景总结

基本准则：所有使用shallowMount的地方都可以用mount替换，但是但凡能使用shallowMount的地方坚决不用mount；

无脑做法：snapshot测试中都使用mount，其他测试都使用shallowMount，测试不会太慢，但也不是最快
【追加】 基于编程的严谨性，非常不提倡这种无脑做法，建议全部使用shallowMount。且上面提到的必须使用mount的情况实际也是非必须的，对此也追加了说明

3. 与stubs的关系
   1. mount：可以与stubs同时使用，但是属于小概率事件。首先不得不使用mount的情况就很少，在此基础上又不得不使用stubs的概率就更小了。
   2. shallowMount：多数使用stubs的情况都是跟shallowMount一起，但是并不是使用shallowMount就一定需要stubs。shallowMount本身就是使用子组件的存根创建wrapper，但是使用了stubs的存根和没有stubs的存根是有区别的，这个会在下面单独讲

与stubs的总结

经常与shallowMount一起出现，只在不得不的场合才会跟mount一起出现。

4. shallowMount与stubs那些事（参照Vue Test Utils-配置）
   1. shallowMount不与stubs合作，单独渲染，此时将使用存储在@vue/test-utils下config.stubs中的默认存根渲染dom
   2. 与stubs合作：config.stubs下的存根会被stubs内存根覆盖，依然是使用该存根
      1. stubs内定义了存根内容，根据自定义内容渲染结果
      2. stubs内未定义存根内容，如果是空数组，毫无意义，跟没写一样。如果是stubs:['may-component']只声明了一个名字，则将may-component解析为一个空的存根，与默认存根不同哦
      3. 默认存根与空存根的不同：空存根只会渲染实际传递的props，默认存根是会将存在默认值的props全都渲染。目前仅发现这点不同,请不要小看这点不同，如果你使用ts的话，这会直接影响你的snapshot测试结果

shallowMount与stubs

stubs存在的话优先按照stubs内容渲染，不存在使用默认存根渲染。注意空存根与默认存根的区别

[Yikhan]

博主总结的很好，感谢分享

[Isabella327]

nice