用全局变量测试Vue可组合

Question

我使用Vue可组合返回一个序列号，用于为组件生成一个唯一的ID，例如，对于aria-控件。

/** Composable to return a sequential number */
import { onMounted, ref } from '@vue/composition-api'

/** Define a starting integer */
const globalItemNumber = ref(0)

/**
 * Increment and return the global item number
 */
export function useSequentialNumber() {
    const localItemNumber = ref(0)

    onMounted(() => (localItemNumber.value = globalItemNumber.value++))

    return { itemNumber: localItemNumber }
}

我已经为这个脚本编写了一个测试，但是当我运行它时，我会得到以下错误：

 ● Test suite failed to run
@serenity-web/common-helpers:     [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
@serenity-web/common-helpers:       3 |
@serenity-web/common-helpers:       4 | /** Define a starting integer */
@serenity-web/common-helpers:     > 5 | const globalItemNumber = ref(0)

我该如何解决这个问题？最好是将全局变量抽象到可组合的外部，还是在测试脚本中有一种模拟它的方法？

Answer 1

这个问题是针对Vue 2的，在Vue 2中，通过@vue/composition-api插件可以获得复合API。错误的意思是，在使用复合API之前，必须执行Vue.use(VueCompositionAPI)。

这可能在应用程序本身也是一样的，但可能需要在测试中以特殊的方式对待它。这需要模块：

Vue.use(VueCompositionAPI);

并在导入之前导入它，特别是在导入时使用组合API的模块( setup函数外)：

import '.../composition-plugin';
...

这需要对应用程序入口点和测试进行。这可以在setupFiles中的所有测试套件中完成一次。