深圳企业网站建设推荐公司,网站首页被黑,wordpress下一页插件,羽贝网站建设vue3 单元测试#xff08;hooks测试#xff09;
普通单元测试 function add(a: number, b: number) {return a b;}expect(add(1, 2)).toEqual(3);vue中的测试
vue的hook中存在vue的生命周期#xff0c;所以需要hooks在vue中运行模拟整个生命周期
为hook提供组件环境
im…vue3 单元测试hooks测试
普通单元测试 function add(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;
export function mountHook(hook: () any, provide: { [key: string]: any } {}) {return new Promise((resolve) {const Comp defineComponent({name: TestHookDepComponent,setup: () {resolve(hook());},template: span123/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不依赖外部
export function testHook() {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;await nextTrick();expect(handle.data1.value).toEqual(3);handle.update(4);await nextTrick();expect(handle.data1.value).toEqual(5);});
});存在其他hook的依赖
不管vue和react都是倾向于组合式hook所以真实开发情况都会存在外部hook的依赖单元测试的目标是只测试自己的逻辑无条件的信赖外部依赖
第三方hook
export function otherHook() {const dataRef ref(1);onMounted(() {dataRef.value 2;});return {dataRef,update: () {dataRef.value 3;}}
}待测试的hooks
import { otherHook } from ./otherHook;
export function myHook() {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);await nextTrick();expect(handle.myData.value).toEqual(2);handle.update(2);await nextTrick();expect(handle.myData.value).toEqual(3);});
});
