如何单独测试自定义hook

vue3有了composition api的概念,也可以利用自定义hook将很多逻辑解耦出去,比如我这里有一个hook:

const state = reactive({
  xx: [],
});

export default function useXXX() {
  const { selectedM } = useOtherHook();

  const fetchxxx = async () => {
    const xx = await xxxApi(selectedM.value);
    state.xx = xx;
  };

  return {
    ...toRefs(state),
    fetchxxx,
  };
}

那么问题来了,我如何在不引入组件的情况下,单独为该hook进行单元测试呢?诚邀各位大佬解惑~

不引入组件,怎么做测试呀?

如果是react的hook单元测试,社区有专门的库react-hooks-testing-library,但是vue3
的hook我没找到相应的工具 :joy:

也是想偷个懒,单元测试不想涉及到组件啦 :grin:

我是单独建立一个项目,把可以共用的函数放进去,写个简单的测试代码,然后打包成库,就是资源包,然后其他项目安装。
共用性强的可以。
如果是小的,就显得有点费劲了。
另外,也可以自己写个插件了啥的吧。

我现在跑最简单的组件测试都还没跑通……用的vue3+jest。插件这个法子倒是不错

找到一个非常棒的工具:https://github.com/ariesjia/vue-composition-test-utils,完全解决了我的问题。能够在不测试组件的情况下测试自定义hook,而且还能精准填充测试覆盖率!

https://juejin.cn/post/7012446423367024676
还想说呢,找到这个可以自动引入hook 的东东,看来你找的了更好用的。

我看看,互相学习 哈哈哈哈 ~