问题与解决：Vue Test Utils当中不能向组合式写法当中注入data

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

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

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

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

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

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

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

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

当测试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的测试还没有进行，不排除组合式的写法在这方面还有其他的坑，期待官方在不久的将来加上对组合式写法的支持。就学习而言的话，还是照着官网来吧。如果有大神知道合适的解决方式的话，望告知。