当我运行包含某些 Vuetify 组件的vue run test:unit时，我收到以下错误：
ReferenceError: requestAnimationFrame is not defined
at VueComponent.mounted (dist/js/webpack:/src/components/VTextField/VTextField.ts:229:1)
at invokeWithErrorHandling (dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:1854:1)
at callHook (dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4219:1)
at Object.insert (dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:3139:1)
at invokeInsertHook (dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6346:1)
at VueComponent.patch [as __patch__] (dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6565:1)
at VueComponent.Vue._update (dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:3945:1)
at VueComponent.updateComponent (dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4066:1)
at Watcher.get (dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4479:1)
at new Watcher (dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4468:1)
at mountComponent (dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4073:1)
at VueComponent../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount (dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:8415:1)
at mount (dist/js/webpack:/node_modules/@vue/test-utils/dist/vue-test-utils.js:13518:1)
at Context.it (dist/js/webpack:/tests/unit/example.spec.js:10:1)
这是我正在测试的确切的最小 Vue 组件：
<template>
<v-select />
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
而且，这是我拥有的确切最低规格.js测试：
import { mount, createLocalVue } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
import Vuetify from 'vuetify'
const vuetify = new Vuetify()
const localVue = createLocalVue()
describe('HelloWorld.vue', () => {
it('works', () => {
const wrapper = mount(HelloWorld, {
localVue,
vuetify
})
})
})
我目前使用以下版本：
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vuetify": "^2.1.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.2.0",
"@vue/cli-plugin-unit-mocha": "~4.2.0",
"@vue/cli-service": "~4.2.0",
"@vue/test-utils": "1.0.0-beta.31",
"chai": "^4.1.2",
"null-loader": "^3.0.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.4",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
}
我尝试了几种不同的东西，但没有运气：
主要是，我尝试在规范中使用以下方法之一.js来定义"requestAnimationFrame"：
global.requestAnimationFrame = (cb) => cb()
window.requestAnimationFrame = (cb) => cb()
window.requestAnimationFrame = setImmediate
使用"全局"选项"修复"未定义请求动画帧"错误，但随后出现以下错误：
TypeError: Cannot read property 'lang' of undefined
at VueComponent.listData (/Users/danialgoodwin/workspace-dan/experiment-vuetify-unit-tests/dist/js/webpack:/src/components/VSelect/VSelect.ts:199:1)
at Watcher.get (/Users/danialgoodwin/workspace-dan/experiment-vuetify-unit-tests/dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4479:1)
at Watcher.evaluate (/Users/danialgoodwin/workspace-dan/experiment-vuetify-unit-tests/dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4584:1)
at VueComponent.computedGetter [as listData] (/Users/danialgoodwin/workspace-dan/experiment-vuetify-unit-tests/dist/js/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4836:1)
at VueComponent.staticList (/Users/danialgoodwin/workspace-dan/experiment-vuetify-unit-tests/dist/js/webpack:/src/components/VSelect/VSelect.ts:215:1)
...
并且，使用任何一个"窗口"选项都具有相同的引用错误和类型错误。
我现在仍在研究这个问题。
我也是 Vue/Vuetify 的新手。有什么想法吗？
为了在单元测试中解决这个问题，我能够模拟出有问题的组件。通过像这样安装组件：
const wrapper = mount(HelloWorld, {
localVue,
stubs: [ 'VSelect' ]
})
这将存根组件而不是运行它们，这将允许你测试组件的逻辑，而无需包含所有 Vuetify 代码。我看到的其他需要以这种方式存根的组件是任何输入类型的组件，例如 VTextField。
如果您尝试使用 vitest，则很容易提供浏览器环境：
-
安装 vitest
-
通过您喜欢的包管理器安装
happy-dom
$ yarn add -D happy-dom
vite.config.js中的设置配置
export default defineConfig({
...
test: {
environment: 'happy-dom',
globals: true,
},
...
});
参考文档。