Vue-test-utils: ReferenceError: requestAnimationFrame is not defined

[xinde]

Version

1.0.0-beta.20

Reproduction link

https://jsfiddle.net/50wL7mdz/734408/

Steps to reproduce

mocha/chai test a .vue file that contains requestAnimationFrame

default eslint config

ReferenceError: requestAnimationFrame is not defined

What is expected?

no this warning

What is actually happening?

ReferenceError: requestAnimationFrame is not defined

eslint config

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@fortawesome/vue-fontawesome": "^0.1.1",
    "@tweenjs/tween.js": "^17.2.0",
    "axios": "^0.18.0",
    "echarts": "^4.2.0-rc.1",
    "element-ui": "^2.4.7",
    "normalize.css": "^8.0.0",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.3",
    "@vue/cli-plugin-e2e-cypress": "^3.0.3",
    "@vue/cli-plugin-eslint": "^3.0.3",
    "@vue/cli-plugin-unit-mocha": "^3.0.3",
    "@vue/cli-service": "^3.0.3",
    "@vue/eslint-config-standard": "^3.0.3",
    "@vue/test-utils": "^1.0.0-beta.20",
    "chai": "^4.1.2",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

[bugsduggan]

I have recently been experiencing a similar issue - I even got as far as creating a repro repo here but you beat me to the bug report.

In my case, I'm using typescript with mocha+chai in addition to vuetify (repo created with @vue/cli v3).

My instinct tells me that we're just missing a polyfill or a shim somewhere but despite my best efforts, I've not been able to reliably find a fix for this myself.

[xinde]

@bugsduggan I still don't know how to fix it.A lot of information has been searched, but no solution has been found :(

[eddyerburgh]

The issue is that jsdom-global doesn't add requestAnimationFrame to the global object.

The immediate fix is to add requestAnimationFrame to the global object before your tests run:

global.requestAnimationFrame = cb => cb()

To include requestAnimation with jsdom, you must pass in the pretendToBeVisible option.

const window = (new JSDOM(``, { pretendToBeVisual: true })).window;

I created a PR in vue-cli to get this added to the mocha unit plugin—https://github.com/vuejs/vue-cli/pull/2573

[JamesMcMahon]

@eddyerburgh I still see this issue and I am making an assumption that the merge PR you linked to is now released.

Is there anything I need to do specifically to use the functionality you added in the PR? Anything I need to set in my configuration?

Quite possible I am seeing an issue with the same symptom but different cause, but wanted to double check.

I can confirm in my tests that adding

// at top
declare const global: any

// before test
global.requestAnimationFrame = (cb: any) => cb();

Fixes the issue.

[eddyerburgh]

Hi @JamesMcMahon, sorry that you're experiencing this issue.

Can you open an issue in the vue-cli repo. That's the repo where the fix was made to

[nargeszmn]

Hi @eddyerburgh . I still see this issue when trying to run my tests.
I am using

• mocha/chai, "

• @vue/cli-plugin-unit-mocha": "^4.0.5,

• @vue/cli-service": "^4.0.5 and

• @vue/test-utils": "1.0.0-beta.29.

I still don't know how to fix this issue. Can you help me to figure out the source of the problem, and a way to be able to fix it?

[zzhenryquezz]

Just a note this could happen in ts projects too, and to resolve this problem you have to define the global function in runtime.

tests/setup.ts:

const requestAnimationFrame = (fn: Function) => fn();
globalThis.requestAnimationFrame = requestAnimationFrame;

And make sure that the setup.ts file is require before run the tests in npm script

package.json:

"test": "vue-cli-service test:unit --include ./tests/setup.ts --recursive ./__tests__/",

[marklytonh]

I'm using Mocha+Chai for my testing, and Vuetify for my component library.

To fix this issue I just added the following to the top of my component.spec.js file
global.requestAnimationFrame = function () {}

I was having this issue when I added a Vuetify v-text-field component in the template of my Vue file

I'm using versions (not sure all packages that are relevant),

"devDependencies": {
    ...
    "@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",
    "vue-cli-plugin-vuetify": "~2.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
    ...
}