reactv16のテストでWarning: React depends on requestAnimationFrameが出る場合

5284 ワード
create-react-app Jest React Jest テキストリンク

react v16はrequestAnimationFrameを要求しますが、jestが使っているjsdom環境だとポイフィルが必要が必要です。
まあ、一時的なハックで時間が解決すると思いますが。

Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills

jest

さて、素のjest環境だとjest.config.jsのsetupFileに以下を追加すればいいです。

module.exports = {
  setupFiles: ['raf/polyfill'],
}

create-react-app環境

create-react-app(CRA)だと、jestの設定をそのままいじれないので少しハックは必要です。

src以下に以下のようなsetupTest.jsを配置します。
どうせ使うと思うので、enzymeの設定も乗せておきます。

import raf from './tempPolyfills'
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

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

同じ階層にtempPolyfills.jsを容易します。

const raf = (global.requestAnimationFrame = cb => {
  setTimeout(cb, 0)
})

export default raf

これでエラーが解消されるはずです。

関連

Reactやreduxのアプリケーションを高速に構築する記事をいくつかあげているのでよかったら確認してください。

さよならボイラープレート。s2sによる高速reduxアプリケーション構築

s2s: reduxにおけるreducerのテスト。あなたがテストを書く必要はないかも知れない
https://qiita.com/akameco/items/66a2232df0e95e5bfe31

flowtypeのactionの型付け。String Literal型とString型について
https://qiita.com/akameco/items/e7021e22da4c9e14463a

Flowtype+reduxにおけるreducerの正しい型付け
https://qiita.com/akameco/items/fe7ba22c158a2593b077

なんかあればコメント欄またはtwitterまでどうぞ。