Cleanup Jest config (#6654)

General cleanup after the [Jest 24 PR](#6278). 

This also includes `jsdom@14` via https://www.npmjs.com/package/jest-environment-jsdom-fourteen. Since we have a node >= 8.10 requirement, we are able to use the latest version of `jsdom` which includes additional implementations of browser APIs such as `MutationObserver` (which we had an issue filed for over at #6617).

/cc @SimenB. Is there more you recommend we do to cleanup our [Jest config](https://github.com/facebook/create-react-app/blob/b0cbf2caa18ee8267855b14578ebc3dee826f552/packages/react-scripts/scripts/utils/createJestConfig.js) for TypeScript?

Co-authored-by: Ian Sutherland <ian@iansutherland.ca>

Author: ianschmitz

package.json

@@ -25,7 +25,7 @@
     "get-port": "^4.2.0",
     "globby": "^9.1.0",
     "husky": "^1.3.1",
-    "jest": "^24.5.0",
+    "jest": "24.7.1",
     "lerna": "2.9.1",
     "lerna-changelog": "~0.8.2",
     "lint-staged": "^8.0.4",

packages/babel-plugin-named-asset-import/package.json

@@ -15,8 +15,8 @@
     "@babel/core": "^7.1.0"
   },
   "devDependencies": {
-    "babel-plugin-tester": "^5.5.1",
-    "jest": "^24.5.0"
+    "babel-plugin-tester": "^6.0.1",
+    "jest": "24.7.1"
   },
   "scripts": {
     "test": "jest"

packages/confusing-browser-globals/package.json

@@ -16,6 +16,6 @@
     "index.js"
   ],
   "devDependencies": {
-    "jest": "24.5.0"
+    "jest": "24.7.1"
   }
 }

packages/react-dev-utils/package.json

@@ -74,7 +74,7 @@
   },
   "devDependencies": {
     "cross-env": "^5.2.0",
-    "jest": "^24.5.0"
+    "jest": "24.7.1"
   },
   "scripts": {
     "test": "cross-env FORCE_COLOR=true jest"

packages/react-error-overlay/package.json

@@ -33,9 +33,8 @@
     "@babel/code-frame": "7.0.0",
     "@babel/core": "7.3.4",
     "anser": "1.4.8",
-    "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
-    "babel-jest": "24.5.0",
+    "babel-jest": "24.7.1",
     "babel-loader": "8.0.5",
     "babel-preset-react-app": "^7.0.2",
     "chalk": "^2.4.2",
@@ -49,7 +48,7 @@
     "eslint-plugin-react": "7.12.4",
     "flow-bin": "^0.63.1",
     "html-entities": "1.2.1",
-    "jest": "24.5.0",
+    "jest": "24.7.1",
     "jest-fetch-mock": "2.1.1",
     "object-assign": "4.1.1",
     "promise": "8.0.2",

packages/react-scripts/fixtures/kitchensink/.template.dependencies.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "bootstrap": "4.1.1",
-    "jest": "24.5.0",
+    "jest": "24.7.1",
     "node-sass": "4.8.3",
     "normalize.css": "7.0.0",
     "prop-types": "15.5.6",

packages/react-scripts/fixtures/kitchensink/README.md

@@ -8,7 +8,7 @@ Tests are automatically run by the CI tools.
 In order to run them locally, without having to manually install and configure everything, the `yarn e2e:docker` CLI command can be used.
 
 This is a simple script that runs a **Docker** container, where the node version, git branch to clone, test suite, and whether to run it with `yarn` or `npm` can be chosen.  
-Simply run `yarn e2e:docker -- --help` to get additional info.
+Simply run `yarn e2e:docker --help` to get additional info.
 
 If you need guidance installing **Docker**, you should follow their [official docs](https://docs.docker.com/engine/installation/).
 

packages/react-scripts/fixtures/kitchensink/integration/env.test.js

@@ -9,8 +9,15 @@ import initDOM from './initDOM';
 
 describe('Integration', () => {
   describe('Environment variables', () => {
+    let doc;
+
+    afterEach(() => {
+      doc && doc.defaultView.close();
+      doc = undefined;
+    });
+
     it('file env variables', async () => {
-      const doc = await initDOM('file-env-variables');
+      doc = await initDOM('file-env-variables');
 
       expect(
         doc.getElementById('feature-file-env-original-1').textContent
@@ -34,18 +41,16 @@ describe('Integration', () => {
           'x-from-development-env'
         );
       }
-      doc.defaultView.close();
     });
 
     it('NODE_PATH', async () => {
-      const doc = await initDOM('node-path');
+      doc = await initDOM('node-path');
 
       expect(doc.getElementById('feature-node-path').childElementCount).toBe(4);
-      doc.defaultView.close();
     });
 
     it('PUBLIC_URL', async () => {
-      const doc = await initDOM('public-url');
+      doc = await initDOM('public-url');
 
       const prefix =
         process.env.NODE_ENV === 'development'
@@ -57,20 +62,18 @@ describe('Integration', () => {
       expect(
         doc.querySelector('head link[rel="shortcut icon"]').getAttribute('href')
       ).toBe(`${prefix}/favicon.ico`);
-      doc.defaultView.close();
     });
 
     it('shell env variables', async () => {
-      const doc = await initDOM('shell-env-variables');
+      doc = await initDOM('shell-env-variables');
 
       expect(
         doc.getElementById('feature-shell-env-variables').textContent
       ).toBe('fromtheshell.');
-      doc.defaultView.close();
     });
 
     it('expand .env variables', async () => {
-      const doc = await initDOM('expand-env-variables');
+      doc = await initDOM('expand-env-variables');
 
       expect(doc.getElementById('feature-expand-env-1').textContent).toBe(
         'basic'
@@ -84,7 +87,6 @@ describe('Integration', () => {
       expect(
         doc.getElementById('feature-expand-env-existing').textContent
       ).toBe('fromtheshell');
-      doc.defaultView.close();
     });
   });
 });

packages/react-scripts/fixtures/kitchensink/integration/initDOM.js

@@ -6,46 +6,31 @@
  */
 
 const fs = require('fs');
-const http = require('http');
-const jsdom = require('jsdom/lib/old-api.js');
+const { JSDOM, ResourceLoader } = require('jsdom');
 const path = require('path');
+const url = require('url');
 
-let getMarkup;
-export let resourceLoader;
-
-if (process.env.E2E_FILE) {
-  const file = path.isAbsolute(process.env.E2E_FILE)
+const file =
+  process.env.E2E_FILE &&
+  (path.isAbsolute(process.env.E2E_FILE)
     ? process.env.E2E_FILE
-    : path.join(process.cwd(), process.env.E2E_FILE);
-
-  const markup = fs.readFileSync(file, 'utf8');
-  getMarkup = () => markup;
+    : path.join(process.cwd(), process.env.E2E_FILE));
 
+export const fetchFile = url => {
   const pathPrefix = process.env.PUBLIC_URL.replace(/^https?:\/\/[^/]+\/?/, '');
+  return fs.readFileSync(
+    path.join(path.dirname(file), url.pathname.replace(pathPrefix, '')),
+    'utf8'
+  );
+};
 
-  resourceLoader = (resource, callback) =>
-    callback(
-      null,
-      fs.readFileSync(
-        path.join(
-          path.dirname(file),
-          resource.url.pathname.replace(pathPrefix, '')
-        ),
-        'utf8'
-      )
-    );
-} else if (process.env.E2E_URL) {
-  getMarkup = () =>
-    new Promise(resolve => {
-      http.get(process.env.E2E_URL, res => {
-        let rawData = '';
-        res.on('data', chunk => (rawData += chunk));
-        res.on('end', () => resolve(rawData));
-      });
-    });
+const fileResourceLoader = new class FileResourceLoader extends ResourceLoader {
+  fetch(href, options) {
+    return Promise.resolve(fetchFile(url.parse(href)));
+  }
+}();
 
-  resourceLoader = (resource, callback) => resource.defaultFetch(callback);
-} else {
+if (!process.env.E2E_FILE && !process.env.E2E_URL) {
   it.only('can run jsdom (at least one of "E2E_FILE" or "E2E_URL" environment variables must be provided)', () => {
     expect(
       new Error("This isn't the error you are looking for.")
@@ -54,18 +39,46 @@ if (process.env.E2E_FILE) {
 }
 
 export default feature =>
-  new Promise(async resolve => {
-    const markup = await getMarkup();
-    const host = process.env.E2E_URL || 'http://www.example.org/spa:3000';
-    const doc = jsdom.jsdom(markup, {
-      created: (_, win) =>
-        win.addEventListener('ReactFeatureDidMount', () => resolve(doc), true),
-      deferClose: true,
-      pretendToBeVisual: true,
-      resourceLoader,
-      url: `${host}#${feature}`,
-      virtualConsole: jsdom.createVirtualConsole().sendTo(console),
-    });
+  new Promise(async (resolve, reject) => {
+    try {
+      const host = process.env.E2E_URL || 'http://www.example.org/spa:3000';
+      const url = `${host}#${feature}`;
+
+      let window;
+
+      if (process.env.E2E_FILE) {
+        window = (await JSDOM.fromFile(file, {
+          pretendToBeVisual: true,
+          resources: fileResourceLoader,
+          runScripts: 'dangerously',
+          url,
+        })).window;
+      } else {
+        window = (await JSDOM.fromURL(url, {
+          pretendToBeVisual: true,
+          resources: 'usable',
+          runScripts: 'dangerously',
+        })).window;
+      }
+
+      const { document } = window;
+
+      document.addEventListener(
+        'ReactFeatureDidMount',
+        () => resolve(document),
+        { capture: true, once: true }
+      );
+      document.addEventListener(
+        'ReactFeatureError',
+        () => {
+          // Cleanup jsdom instance since we don't need it anymore
+          window.close();
 
-    doc.close();
+          reject(`Error loading feature: ${feature}`);
+        },
+        { capture: true, once: true }
+      );
+    } catch (e) {
+      reject(e);
+    }
   });