More than 5 years have passed since last update.

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

Last updated at 2017-10-04Posted at 2017-10-04

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

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

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

jest

create-react-app環境

関連