Cleanup Jest config

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

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

packages/react-error-overlay/package.json

@@ -33,7 +33,6 @@
     "@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-loader": "8.0.5",

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,32 @@
  */
 
 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');
 
-let getMarkup;
-export let resourceLoader;
+export let fetchFile;
 
 if (process.env.E2E_FILE) {
   const 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;
-
   const pathPrefix = process.env.PUBLIC_URL.replace(/^https?:\/\/[^/]+\/?/, '');
 
-  resourceLoader = (resource, callback) =>
-    callback(
-      null,
-      fs.readFileSync(
-        path.join(
-          path.dirname(file),
-          resource.url.pathname.replace(pathPrefix, '')
-        ),
-        'utf8'
-      )
+  const fetchFile = url =>
+    fs.readFileSync(
+      path.join(path.dirname(file), 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));
-      });
-    });
 
-  resourceLoader = (resource, callback) => resource.defaultFetch(callback);
-} else {
+  fileResourceLoader = new class FileResourceLoader extends ResourceLoader {
+    fetch(url, options) {
+      return Promise.resolve(fetchFile(url));
+    }
+  }();
+}
+
+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 +40,36 @@ 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;
 
-    doc.close();
+      document.addEventListener(
+        'ReactFeatureDidMount',
+        () => resolve(document),
+        true
+      );
+    } catch (e) {
+      reject(e);
+    }
   });

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import initDOM, { resourceLoader } from './initDOM';
+import initDOM, { fetchFile } from './initDOM';
 import url from 'url';
 
 const matchCSS = (doc, regexes) => {
@@ -17,11 +17,11 @@ const matchCSS = (doc, regexes) => {
         href = elem.href;
       }
     }
-    resourceLoader({ url: url.parse(href) }, (_, textContent) => {
-      for (const regex of regexes) {
-        expect(textContent).toMatch(regex);
-      }
-    });
+
+    const textContent = fetchFile(url.parse(href));
+    for (const regex of regexes) {
+      expect(textContent).toMatch(regex);
+    }
   } else {
     for (let i = 0; i < regexes.length; ++i) {
       expect(

packages/react-scripts/package.json

@@ -28,7 +28,6 @@
     "@svgr/webpack": "4.1.0",
     "@typescript-eslint/eslint-plugin": "1.4.1",
     "@typescript-eslint/parser": "1.4.1",
-    "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "24.5.0",
     "babel-loader": "8.0.5",
@@ -52,6 +51,7 @@
     "html-webpack-plugin": "4.0.0-beta.5",
     "identity-obj-proxy": "3.0.0",
     "jest": "24.5.0",
+    "jest-environment-jsdom-fourteen": "0.1.0",
     "jest-resolve": "24.5.0",
     "jest-watch-typeahead": "^0.2.1",
     "mini-css-extract-plugin": "0.5.0",

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -24,22 +24,18 @@ module.exports = (resolve, rootDir, isEjecting) => {
   const config = {
     collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
 
-    setupFiles: [
-      isEjecting
-        ? 'react-app-polyfill/jsdom'
-        : require.resolve('react-app-polyfill/jsdom'),
-    ],
+    setupFiles: [require.resolve('react-app-polyfill/jsdom')],
 
     setupFilesAfterEnv: setupTestsFile ? [setupTestsFile] : [],
     testMatch: [
       '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
       '<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}',
     ],
-    testEnvironment: 'jsdom',
+    testEnvironment: require.resolve('jest-environment-jsdom-fourteen'),
     testURL: 'http://localhost',
     transform: {
       '^.+\\.(js|jsx|ts|tsx)$': isEjecting
-        ? '<rootDir>/node_modules/babel-jest'
+        ? require.resolve('babel-jest')
         : resolve('config/jest/babelTransform.js'),
       '^.+\\.css$': resolve('config/jest/cssTransform.js'),
       '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': resolve(
@@ -52,7 +48,7 @@ module.exports = (resolve, rootDir, isEjecting) => {
     ],
     moduleNameMapper: {
       '^react-native$': 'react-native-web',
-      '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+      '^.+\\.module\\.(css|sass|scss)$': require.resolve('identity-obj-proxy'),
     },
     moduleFileExtensions: [...paths.moduleFileExtensions, 'node'].filter(
       ext => !ext.includes('mjs')

tasks/local-test.sh

@@ -114,6 +114,7 @@ docker run \
   --env NPM_CONFIG_PREFIX=/home/node/.npm \
   --env NPM_CONFIG_QUIET=true \
   --tty \
+  --rm \
   --user node \
   --volume ${PWD}/..:/var/create-react-app \
   --workdir /home/node \