How to fix 'ReferenceError: requestAnimationFrame is not defined' in Vuetify unit test

Question

I'm getting the following error when I run vue run test:unit that includes certain Vuetify components:

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)

Here's the exact minimal Vue component that I'm testing:

<template>
  <v-select />
</template>

<script>
  export default {
    name: 'HelloWorld'
  }
</script>

And, here's the exact minimal spec.js test that I have:

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
    })
  })
})

I'm currently using the following versions:

  "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"
  }

I've tried a few different things with no luck:

Mainly, I tried using one of the following in the spec.js to define the 'requestAnimationFrame':

global.requestAnimationFrame = (cb) => cb()
window.requestAnimationFrame = (cb) => cb()
window.requestAnimationFrame = setImmediate

Using the 'global' option 'fixes' the 'requestAnimationFrame is not defined' error, but then has the following error instead:

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)
    ...

And, using either of the 'window' options has the same ReferenceError and TypeError.

I'm still looking into the issue now.

I'm also new to Vue/Vuetify. Any ideas?

Answer 1

To get around this for unit testing, I was able to mock out the offending components. By mounting the component like this:

const wrapper = mount(HelloWorld, {
  localVue,
  stubs: [ 'VSelect' ]
})

This will stub out the components instead of running them, which will let you test your component's logic without needing to include all the Vuetify code as well. Other component's that I've seen need stubbed in this way are any of the input type components, like VTextField.