Unit testing 如何修复';ReferenceError:requestAnimationFrame未定义';在Vuetify单元测试中
运行包含某些Vuetify组件的Unit testing 如何修复';ReferenceError:requestAnimationFrame未定义';在Vuetify单元测试中,unit-testing,vue.js,vuetify.js,Unit Testing,Vue.js,Vuetify.js,运行包含某些Vuetify组件的vue运行测试时,我遇到以下错误: 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/
vue运行测试时,我遇到以下错误:
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>
我目前正在使用以下版本:
"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"
}
我尝试过几种不同的方法,但都没有成功:
主要是,我尝试在spec.js中使用以下方法之一来定义“requestAnimationFrame”:
global.requestAnimationFrame = (cb) => cb()
window.requestAnimationFrame = (cb) => cb()
window.requestAnimationFrame = setImmediate
使用“全局”选项“修复”“requestAnimationFrame未定义”错误,但会出现以下错误:
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)
...
并且,使用任一“窗口”选项都具有相同的ReferenceError和TypeError
我现在还在调查这个问题
我也是Vue/Vuetify的新手。有什么想法吗?为了解决单元测试的问题,我能够模拟出有问题的组件。通过如下方式安装部件:
const wrapper=mount(HelloWorld{
localVue,
存根:['VSelect']
})
这将删除组件而不是运行它们,这将允许您测试组件的逻辑,而无需包括所有Vuetify代码。我看到的其他组件需要以这种方式进行存根,它们是任何输入类型的组件,比如VTextField
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)
...