问题与解决：Vue Test Utils当中不能向组合式写法当中注入data_选项式中data对象在组合式怎么使用-CSDN博客

本文链接：https://blog.csdn.net/huangfengnt/article/details/131387612

文章探讨了在使用VueTestUtils测试Vue3组件时，如何在setup函数中注入数据的两种方法。一种是将所有数据放在data对象内，另一种是利用全局注入。然而，这两种方法都有其局限性，作者认为它们并不完全符合组合式API的哲学，并希望官方能提供更好的支持。测试props和emits的功能尚未提及，期待未来改进。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue Test Utils有一个mount的过程，其中可以带上一些参数，来改变组件内部的一些属性，从而获得不同的测试结果，该参数的interface如下

interface MountingOptions<Props, Data = {}> {
  attachTo?: HTMLElement | string
  attrs?: Record<string, unknown>
  data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
  props?: (RawProps & Props) | ({} extends Props ? null : never)
  slots?: { [key: string]: Slot } & { default?: Slot }
  global?: GlobalMountOptions
  shallow?: boolean
}

我们通过其中的data属性来进行注入，这在选项式的写法中是有作用的，选项式组件就有一个属性是data，只要把它覆盖掉就行了，但是在setup的写法当中就不行了。

我搞了两种方式，第一种是在被测试的组件之中的所有自定义的数据都放在data大对象之中，如下

<template>
    <div>
    <nav>
      <a id="profile" href="/profile">My Profile</a>
      <a v-if="data.admin" id="admin" href="/admin">Admin</a>
    </nav>
    </div>
</template>
<script lang="ts" setup>
import { inject, ref } from "vue";
解决setup之中不能再测试中注入的第一种写法
let data={
    admin:ref<boolean>(false)
}
</script>

然后你在测试mount的时候正常注入

test("Conditional Rendering",async()=>{
    let wraper=mount(ConditionalRender,{
         data() {
            admin:true
         }, 
    })
    expect(wraper.find("#admin").exists()).toBe(true)    
})

但是这种写法实际上不是很符合组合式api写法的哲学。

第二种方法就是官网上提到了的，使用全局注入

<template>
    <div>
    <nav>
      <a id="profile" href="/profile">My Profile</a>
      <a v-if="admin" id="admin" href="/admin">Admin</a>
    </nav>
    </div>
</template>
<script lang="ts" setup>
import { inject, ref } from "vue";

// 第二种方法需要使用注入
let admin=inject<boolean>("admin")

</script>

当测试mount的时候可以这样写

test("Conditional Rendering",async()=>{
    // 第二种写法就多了需要修改的部分，是通过global的注入来完成的
    let wraper=mount(ConditionalRender,{
        // data() {
        //     admin:true
        // },
        global:{
            provide:{
                admin:true
            }
        }
    })  
    expect(wraper.find("#admin").exists()).toBe(true)
    
})

但是这样的写法呢，实际上是更改了代码。你还得改回去是吧。

我个人觉得两种写法都是有问题的，并且我在官网看过，似乎没有找到对组合式写法的支持，关于emits，props的测试还没有进行，不排除组合式的写法在这方面还有其他的坑，期待官方在不久的将来加上对组合式写法的支持。就学习而言的话，还是照着官网来吧。如果有大神知道合适的解决方式的话，望告知。