ReferenceError: requestAnimationFrame is not defined

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

16reactions
eddyerburghcommented, Sep 22, 2018

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

1reaction
nargeszmncommented, Nov 6, 2019

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

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

requestAnimationFrame is not defined it Next.js with React ...
The problem is in the missed RequestAnimationFrame functionality at the server. This error happens when Next.js tries to render the ...
Read more >
requestAnimationFrame is not defined' in Vuetify unit test ...
Coding example for the question How to fix 'ReferenceError: requestAnimationFrame is not defined' in Vuetify unit test-vuetify.js.
Read more >
What is the best solution to solve requestAnimationFrame is ...
The requestAnimationFrame is not defined” is an Angular universal server running issue. The best solution for this issue is to search for ...
Read more >
Window.requestAnimationFrame() - Web APIs | MDN
The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a ...
Read more >
How to Use requestAnimationFrame with React | Pluralsight
Animations can be created using CSS but it is not suitable for non-linear ... repeatedly executes the code after the defined interval:.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found