web-dev-qa-db-ja.com

Jestテストでの `requestAnimationFrame`ポリフィルエラー

React=にアップグレードした後、Jestユニットテストを実行したときにこのエラーが発生しました。

ReactはrequestAnimationFrameに依存します。古いブラウザでポリフィルを必ずロードしてください。

どうすれば修正できますか？

Jest 18.1.0を使用しています。

reactjsjestjsreact-dom
22
Yangshun Tay

回避策を見つけました！

手順：

  1. ファイル__mocks__/react.jsを作成します
  2. 次を__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. Jestを実行します。

コードのコメントにマークされているとおり

これは https://github.com/facebook/react/issues/9102#issuecomment-283873039 からのソリューションです

33
Atul

これは私のために働いた：

  1. インストールraf

npm install --saveDev rafまたはyarn add -D raf

  1. setupFilesのポリフィルをjestのpackage.jsonの設定に追加するには、次のようにします。

'setupFiles': ['raf/polyfill']

注：この配列に他のセットアップファイルがある場合は、raf/polyfillを最初に配置することをお勧めします。

33
Soska

テストのためにポリフィルする必要がある場合は、実際に調整する必要はありません。

このコードで新しいファイルを作成します。

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

そのファイルをpackage.jsonのjest/setupFiles配列に追加します。

9
sbaechler

Create-react-appを使用している場合、これらのソリューションの一部はうまく機能しません（setupFilesの場合はまったく機能しません）。うまく機能するのは、src/setupTests.jsにファイルを作成し、そこにモックを追加することです。

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

他のグローバルモックをそこに追加することもできます（例：localStorageおよびnavigator.serviceWorker）。

3
smfoote

別の実用的なソリューション！

Jest configのsetupFilesプロパティを使用して、各仕様の前に単純なシムをロードするという考え方です。

ファイルshim.jsファイル（ルートディレクトリにあることが望ましい）を作成し、次のコードを含めます。

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

次に、すべての/ほとんどのファイルに繰り返し現れる冗長なコードがあるかもしれません-そしてそれらを単一のファイルに入れて、各仕様の前にも実行させたいのです：

ルートディレクトリにもsetup.jsファイルを作成します。 D.R.Yの優れた冗長コードは、反応酵素アダプターの構成コードです。ここに貼り付けます

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

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

jest.config.jsファイルを作成して、2つのファイルのパスを指定します

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

NB：jest設定ファイルはjsonを取るため、json 'sを確認してくださいin。また、shim.jsおよびsetup.jsファイルがjest.config.jsと同じディレクトリにない場合は、それに応じてパスを調整します。

お役に立てれば！

クレジット： https://github.com/facebook/jest/issues/4545

1
Ruto Collins

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

テストでは、設定した最大経過時間に達するまでRAFコールバックを繰り返し呼び出します。すぐに発生するため、ストールする必要はありません。

1
inorganik

react-scriptsを1.0.15以降にアップグレードするだけです。それはそのバージョンの後に公式に修正されました。詳細については https://github.com/facebook/create-react-app/issues/3199 をご覧ください

gaearon commented on 31 Oct 2017のコメントを検索

0
Kevin Li