vue hook单元测试

vue3 单元测试（hooks测试）

普通单元测试

functionadd(a:number, b:number){return a + b;}expect(add(1,2)).toEqual(3);

vue中的测试

vue的hook中存在vue的生命周期，所以需要hooks在vue中运行模拟整个生命周期

为hook提供组件环境

import{ mount }from'@vue/test-utils';exportfunctionmountHook(hook:()=>any, provide:{[key:string]:any}={}){returnnewPromise((resolve)=>{const Comp =defineComponent({
      name:'TestHookDepComponent',setup:()=>{resolve(hook());},
      template:'<span>123</span>',});const ProviderComponent =defineComponent({
      name:'TestHookProvideComponent',
      components:{ TestHookDepComponent: Comp },
      provide: provide,setup:()=>{},
      template:'<TestHookDepComponent />',});const comp =mount(ProviderComponent,{ props:{ name:'123'}});return comp;});}

为了方便提供和修改hook中的其他依赖所以父组件提供ref等数据，子组件依赖的hook可获取到

测试纯hooks不依赖外部

exportfunctiontestHook(){const data =ref(1);const data1 =ref(data.value +1);watch([data.value],()=>{
        data1.value = data.value +1;});return{updateData:(num:number)=>{
            data.value = num;},
        data,
        data1
    }}

普通hook测试

import{ mountHook }from'./mountHook';import{ testHook }from'./testHook';describe('testHook',()=>{it('test1',async()=>{const handle =testHook(testHook);expect(handle.data.value).toEqual(1);expect(handle.data1.value).toEqual(2);
        handle.data.value =2;awaitnextTrick();expect(handle.data1.value).toEqual(3);
        handle.update(4);awaitnextTrick();expect(handle.data1.value).toEqual(5);});});

存在其他hook的依赖

不管vue和react都是倾向于组合式hook，所以真实开发情况都会存在外部hook的依赖，单元测试的目标是只测试自己的逻辑，无条件的信赖外部依赖

• 第三方hook

exportfunctionotherHook(){const dataRef =ref(1);onMounted(()=>{
        dataRef.value =2;});return{
        dataRef,update:()=>{
            dataRef.value =3;}}}

• 待测试的hooks

import{ otherHook }from'./otherHook';exportfunctionmyHook(){const{ dataRef, update}=otherHook();const myValue =ref(1);const myData =computed(()=>{return dataRef.value + myValue.value;});return{
        myData,update:(val:number)=>{
            myValue.value = val;}}}

• 测试

import{ vi }from'vitest';import{ myHook }from'./myHook';describe('test myHook',()=>{it('test',async()=>{// 替换otherHook，让otherHook按照自己的预想逻辑运行
        vi.mock('./otherHook',()=>{return{otherHook:()=>{const dataRef =ref(1);return{
                        dataRef,update:()=>{}}}}});const handle =testHook(myHook);awaitnextTrick();expect(handle.myData.value).toEqual(2);
        handle.update(2);awaitnextTrick();expect(handle.myData.value).toEqual(3);});});