Unit testing 如何修复';ReferenceError:requestAnimationFrame未定义';在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/

运行包含某些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/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)
    ...