chore: make tests compatible with Jest 24 (#15779)

* chore: make tests compatible with Jest 24

* remove fake rafs

* rollback jsdom for localstorage compat

* Apply suggestions from code review

Co-Authored-By: Sunil Pai <threepointone@oculus.com>

* chore: cleanup lockfile

packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js

@@ -521,7 +521,6 @@ const tests = {
       // Valid because the ref is captured.
       code: `
         function useMyThing(myRef) {
-          const myRef = useRef();
           useEffect(() => {
             const handleMove = () => {};
             const node = myRef.current;

packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js

@@ -95,7 +95,7 @@ eslintTester.run('react-hooks', ReactHooksESLintRule, {
       useHook2 = () => { useState(); };
       ({useHook: () => { useState(); }});
       ({useHook() { useState(); }});
-      const {useHook = () => { useState(); }} = {};
+      const {useHook3 = () => { useState(); }} = {};
       ({useHook = () => { useState(); }} = {});
     `,
     `

packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js

@@ -651,7 +651,7 @@ describe('ReactDOMServerIntegration', () => {
       });
     });
 
-    describe('component hierarchies', async function() {
+    describe('component hierarchies', function() {
       itRenders('single child hierarchies of components', async render => {
         const Component = props => <div>{props.children}</div>;
         let e = await render(

packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js

@@ -37,13 +37,7 @@ describe('ChangeEventPlugin', () => {
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     // TODO pull this into helper method, reduce repetition.
     // mock the browser APIs which are used in schedule:
-    // - requestAnimationFrame should pass the DOMHighResTimeStamp argument
     // - calling 'window.postMessage' should actually fire postmessage handlers
-    global.requestAnimationFrame = function(cb) {
-      return setTimeout(() => {
-        cb(Date.now());
-      });
-    };
     const originalAddEventListener = global.addEventListener;
     let postMessageCallback;
     global.addEventListener = function(eventName, callback, useCapture) {

packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee

@@ -543,3 +543,4 @@ describe 'ReactCoffeeScriptClass', ->
     node = ReactDOM.findDOMNode(instance)
     expect(node).toBe container.firstChild
     undefined
+  undefined

scripts/jest/config.base.js

@@ -21,4 +21,11 @@ module.exports = {
   collectCoverageFrom: ['packages/**/*.js'],
   timers: 'fake',
   snapshotSerializers: [require.resolve('jest-snapshot-serializer-raw')],
+  // Jest changed from `about:blank` to `http://localhost` default in 24.5 (https://github.com/facebook/jest/pull/6792)
+  // in order to address https://github.com/facebook/jest/issues/6766. If one uses `about:blank` in JSDOM@11.12 or
+  // newer, it fails with `SecurityError: localStorage is not available for opaque origins`. However, some of React's
+  // tests depend on `about:blank` being the domain (for e.g. `url` in `img` tags). So we set `about:blank` here to
+  // keep the current behavior and make sure to keep the version of JSDOM to version lower than 11.12. This will have
+  // to be addressed properly when Jest 25 is released, as it will come with a newer version of JSDOM.
+  testURL: 'about:blank',
 };

scripts/jest/preprocessor.js

@@ -69,7 +69,7 @@ module.exports = {
               }
             : {}
         )
-      ).code;
+      );
     }
     return src;
   },

scripts/jest/setupEnvironment.js

@@ -9,10 +9,6 @@ global.__PROFILE__ = NODE_ENV === 'development';
 global.__UMD__ = false;
 
 if (typeof window !== 'undefined') {
-  global.requestAnimationFrame = function(callback) {
-    setTimeout(callback);
-  };
-
   global.requestIdleCallback = function(callback) {
     return setTimeout(() => {
       callback({