网站搜索

typescript - 如何在 setup 函数中基于外部可组合的计算属性测试 Vue 3 观察者


我在尝试测试一个在可组合函数中使用外部逻辑的组件时遇到了问题。我使用的是 Vue 2.7 和 Typescript 4.5。这个组件基本上是这样的:

export default Vue.extend({
  setup() {
    const {
      isLoading: isLoadingProducts
    } = usePromotionProducts();

    watch(isLoadingProducts, newIsLoadingProducts => {
      doSomething();
    });

    return {
      isLoading
    };
  }

可组合项看起来像这样:

export function usePromotionProducts() {
  const isLoading = computed(() => /* stuff here /*)
  return {
    isLoading
  };

使用 Jest,我希望能够监视 usePromotionProducts() 的返回值。由于类型问题,我需要为模拟的响应提供一个计算属性:

jest.spyOn(composables, 'usePromotionProducts').mockReturnValue({
  isLoading: computed(() => false)
});

通过这样做,我找不到应该如何操作 isLoading 计算属性,以便触发 watch 回调,从而执行 doSomething() 函数。我认为提供一个指向模拟响应的 ref 可能更好,而不是 computed,但这不符合函数的返回类型定义。提前感谢任何建议!