Как исправить 'ReferenceError: requestAnimationFrame не определен' в модульном тесте Vuetify - PullRequest
Новая
       27

Как исправить 'ReferenceError: requestAnimationFrame не определен' в модульном тесте Vuetify

0 голосов
/ 11 февраля 2020

Я получаю следующую ошибку при запуске vue run test:unit, который включает в себя определенные компоненты Vuetify: 

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>

И вот точный минимальный тест spe c. 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"
  }

Я безуспешно пробовал несколько разных вещей:

В основном, я пытался использовать одно из следующего в spe c. js, чтобы определить 'requestAnimationFrame': 

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

Использование параметра «global» исправляет ошибку «requestAnimationFrame is notfined», но вместо этого имеет следующую ошибку: 

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

И использование любого из параметров «window» имеет то же ReferenceError и TypeError.

Я все еще изучаю проблему сейчас.

Я также новичок в Vue / Vuetify. Есть идеи?

...