diff --git a/src/renderers/dom/fiber/ReactDOMFiberEntry.js b/src/renderers/dom/fiber/ReactDOMFiberEntry.js index 0e0559d47a1d7..4732e4e8127a0 100644 --- a/src/renderers/dom/fiber/ReactDOMFiberEntry.js +++ b/src/renderers/dom/fiber/ReactDOMFiberEntry.js @@ -57,11 +57,29 @@ var { } = ReactDOMFiberComponent; var {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree; +let checkForRAF = () => {}; + if (__DEV__) { var lowPriorityWarning = require('lowPriorityWarning'); var warning = require('fbjs/lib/warning'); var validateDOMNesting = require('validateDOMNesting'); var {updatedAncestorInfo} = validateDOMNesting; + var checkedRaf = false; + + checkForRAF = () => { + if ( + !checkedRaf && + ExecutionEnvironment.canUseDOM && + typeof requestAnimationFrame !== 'function' + ) { + warning( + false, + 'React depends on requestAnimationFrame. Make sure that you load a ' + + 'polyfill in older browsers. http://fb.me/react-polyfills', + ); + } + checkedRaf = true; + }; if ( typeof Map !== 'function' || @@ -731,6 +749,7 @@ var ReactDOMFiber = { container: DOMContainer, callback: ?Function, ) { + checkForRAF(); return renderSubtreeIntoContainer( null, element, diff --git a/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js b/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js index 36f63a3b4f095..ef93c2f1594da 100644 --- a/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js +++ b/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js @@ -10,7 +10,6 @@ 'use strict'; var React = require('react'); -var ReactDOM = require('react-dom'); var ReactTestUtils = require('react-dom/test-utils'); var PropTypes = require('prop-types'); @@ -20,11 +19,30 @@ describe('ReactDOMFiber', () => { } var container; + var ReactDOM; beforeEach(() => { + ReactDOM = require('react-dom'); container = document.createElement('div'); }); + it('warns when requestAnimationFrame is not polyfilled in the browser', () => { + const previousRAF = global.requestAnimationFrame; + try { + global.requestAnimationFrame = undefined; + spyOn(console, 'error'); + + ReactDOM.render(
, container); + + expect(console.error.calls.count()).toBe(1); + expect(console.error.calls.argsFor(0)[0]).toContain( + 'React depends on requestAnimationFrame.', + ); + } finally { + global.requestAnimationFrame = previousRAF; + } + }); + it('should render strings as children', () => { const Box = ({value}) =>
{value}
; diff --git a/src/renderers/shared/ReactDOMFrameScheduling.js b/src/renderers/shared/ReactDOMFrameScheduling.js index de8d0da98f379..4eae7aec433e7 100644 --- a/src/renderers/shared/ReactDOMFrameScheduling.js +++ b/src/renderers/shared/ReactDOMFrameScheduling.js @@ -22,21 +22,6 @@ import type {Deadline} from 'ReactFiberReconciler'; var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment'); -if (__DEV__) { - var warning = require('fbjs/lib/warning'); - - if ( - ExecutionEnvironment.canUseDOM && - typeof requestAnimationFrame !== 'function' - ) { - warning( - false, - 'React depends on requestAnimationFrame. Make sure that you load a ' + - 'polyfill in older browsers. http://fb.me/react-polyfills', - ); - } -} - // TODO: There's no way to cancel, because Fiber doesn't atm. let rIC: (callback: (deadline: Deadline) => void) => number; diff --git a/src/renderers/shared/__tests__/ReactDOMFrameScheduling-test.js b/src/renderers/shared/__tests__/ReactDOMFrameScheduling-test.js index 254dd791313d7..43a2a5d92a467 100644 --- a/src/renderers/shared/__tests__/ReactDOMFrameScheduling-test.js +++ b/src/renderers/shared/__tests__/ReactDOMFrameScheduling-test.js @@ -10,22 +10,6 @@ 'use strict'; describe('ReactDOMFrameScheduling', () => { - it('warns when requestAnimationFrame is not polyfilled in the browser', () => { - const previousRAF = global.requestAnimationFrame; - try { - global.requestAnimationFrame = undefined; - jest.resetModules(); - spyOn(console, 'error'); - require('react-dom'); - expect(console.error.calls.count()).toBe(1); - expect(console.error.calls.argsFor(0)[0]).toContain( - 'React depends on requestAnimationFrame.', - ); - } finally { - global.requestAnimationFrame = previousRAF; - } - }); - // We're just testing importing, not using it. // It is important because even isomorphic components may import it. it('can import findDOMNode in Node environment', () => {