web-dev-qa-db-fra.com

Erreur polyfill `requestAnimationFrame` dans les tests Jest

Vous avez obtenu cette erreur après la mise à niveau vers React lorsque j'ai exécuté mes tests unitaires Jest

Réagir dépend de requestAnimationFrame. Assurez-vous de charger un polyfill dans les anciens navigateurs.

Comment je le répare?

J'utilise Jest 18.1.0.

reactjsjestjsreact-dom
22
Yangshun Tay

Trouvé une solution de contournement!

Pas:

  1. Créez le fichier __mocks__/react.js 
  2. Ajouter ce qui suit dans __mocks__/react.js

const react = require('react');
// Resolution for requestAnimationFrame not supported in jest error :
// https://github.com/facebook/react/issues/9102#issuecomment-283873039
global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

module.exports = react;

  1. Courez la plaisanterie!

Comme indiqué sur les commentaires sur le code 

Voici la solution de https://github.com/facebook/react/issues/9102#issuecomment-283873039

31
Atul

cela a fonctionné pour moi:

  1. Installer raf

npm install --saveDev raf ou yarn add -D raf

  1. Ajoutez le polyfill à votre setupFiles dans votre jest config dans package.json comme ceci:

'setupFiles': ['raf/polyfill']

Remarque: si vous avez d'autres fichiers d'installation dans ce tableau, vous voudrez peut-être d'abord mettre raf/polyfill.

33
Soska

Si vous avez juste besoin de le polyfiler pour les tests, vous n'avez pas besoin de la limitation. 

Créez un nouveau fichier avec ce code:

global.requestAnimationFrame = function (cb) {
    return setTimeout(cb, 0);
};

Ajoutez ce fichier au tableau jest/setupFiles dans votre package.json.

8
sbaechler

Si vous utilisez create-react-app, certaines de ces solutions ne fonctionneront pas bien (ou pas du tout, dans le cas de setupFiles). Ce qui fonctionne bien, c’est créer un fichier dans src/setupTests.js et y ajouter votre maquette:

global.requestAnimationFrame = (cb) => { cb(); };

Vous pouvez également ajouter d’autres simulations globales (par exemple, localStorage et navigator.serviceWorker).

3
smfoote

Une autre solution de travail!

L'idée est de charger une simple cale avant chaque spécification, en utilisant la propriété setupFiles dans la configuration jest.

Créez un fichier fichier shim.js (de préférence dans votre répertoire racine) et insérez le code correspondant: 

global.requestAnimationFrame = (callback) => {
    setTimeout(callback, 0);
};

Ensuite, vous rencontrez peut-être un code redondant qui réapparaît dans tous/la plupart de vos fichiers - et vous souhaitez les placer dans un seul fichier et les exécuter avant chaque spécification également, pour le faire:

Créez également un fichier setup.js dans le répertoire racine. Un bon morceau de code redondant à D.R.Y est le code de configuration de l'adaptateur enzyme enzyme. Collez-le ici

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

Maintenant, créez le fichier jest.config.js, pour spécifier les chemins des deux fichiers

{
    module.exports = {
        "setupFiles": ["<rootDir>shim.js", "<rootDir>setup.js"]
    }
}

N.B: Le fichier de configuration Jest prend json, alors assurez-vous que json est entré. De plus, si vos fichiers shim.js et setup.js ne se trouvent pas dans le même répertoire que votre jest.config.js, ajustez le chemin en conséquence.

J'espère que cela t'aides!

Crédit: https://github.com/facebook/jest/issues/4545

1
Ruto Collins

Voici un moyen réaliste de simuler requestAnimationFrame:

let time;
const maxTimeElapsed = 2000;

beforeEach(() => {
  time = 0;
  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
    time += 100;
    if (time < maxTimeElapsed) {
      return cb(time) as any;
    }
  });
});

dans votre test, le rappel de la RAF est répété jusqu'à ce qu'il atteigne le temps écoulé maximal défini. Cela se produit instantanément, vous n'avez donc pas besoin de le bloquer.

1
inorganik

Il suffit de mettre à jour votre react-scripts vers 1.0.15 ou plus. Il a été officiellement corrigé après cette version. Voir plus de détails dans https://github.com/facebook/create-react-app/issues/3199

Rechercher dans le commentaire de gaearon commented on 31 Oct 2017

0
Kevin Li