使用全局变量测试 Vue Composable

Question

我正在使用 Vue 可组合到 return 用于为组件生成唯一 ID 的序列号，例如对于 aria-controls.

/** 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，其中组合 API 可通过 @vue/composition-api 插件获得。错误意味着它所说的，在使用组合 API.

之前必须执行 Vue.use(VueCompositionAPI)

在应用程序本身中可能相同，但可能需要在测试中以特殊方式处理它。这需要有模块：

Vue.use(VueCompositionAPI);

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

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

这需要为应用程序入口点和测试完成。这可以对 setupFiles.

中的所有测试套件完成一次

使用全局变量测试 Vue Composable

Testing Vue Composable with Global Variable

vue.js

vuejs2

vue-composition-api