Run 90% of tests on compiled bundles (both development and production) (

#11633)

* Extract Jest config into a separate file

* Refactor Jest scripts directory structure

Introduces a more consistent naming scheme.

* Add yarn test-bundles and yarn test-prod-bundles

Only files ending with -test.public.js are opted in (so far we don't have any).

* Fix error decoding for production bundles

GCC seems to remove `new` from `new Error()` which broke our proxy.

* Build production version of react-noop-renderer

This lets us test more bundles.

* Switch to blacklist (exclude .private.js tests)

* Rename tests that are currently broken against bundles to *-test.internal.js

Some of these are using private APIs. Some have other issues.

* Add bundle tests to CI

* Split private and public ReactJSXElementValidator tests

* Remove internal deps from ReactServerRendering-test and make it public

* Only run tests directly in __tests__

This lets us share code between test files by placing them in __tests__/utils.

* Remove ExecutionEnvironment dependency from DOMServerIntegrationTest

It's not necessary since Stack.

* Split up ReactDOMServerIntegration into test suite and utilities

This enables us to further split it down. Good both for parallelization and extracting public parts.

* Split Fragment tests from other DOMServerIntegration tests

This enables them to opt other DOMServerIntegration tests into bundle testing.

* Split ReactDOMServerIntegration into different test files

It was way too slow to run all these in sequence.

* Don't reset the cache twice in DOMServerIntegration tests

We used to do this to simulate testing separate bundles.
But now we actually *do* test bundles. So there is no need for this, as it makes tests slower.

* Rename test-bundles* commands to test-build*

Also add test-prod-build as alias for test-build-prod because I keep messing them up.

* Use regenerator polyfill for react-noop

This fixes other issues and finally lets us run ReactNoop tests against a prod bundle.

* Run most Incremental tests against bundles

Now that GCC generator issue is fixed, we can do this.
I split ErrorLogging test separately because it does mocking. Other error handling tests don't need it.

* Update sizes

* Fix ReactMount test

* Enable ReactDOMComponent test

* Fix a warning issue uncovered by flat bundle testing

With flat bundles, we couldn't produce a good warning for <div onclick={}> on SSR
because it doesn't use the event system. However the issue was not visible in normal
Jest runs because the event plugins have been injected by the time the test ran.

To solve this, I am explicitly passing whether event system is available as an argument
to the hook. This makes the behavior consistent between source and bundle tests. Then
I change the tests to document the actual logic and _attempt_ to show a nice message
(e.g. we know for sure `onclick` is a bad event but we don't know the right name for it
on the server so we just say a generic message about camelCase naming convention).

package.json

@@ -35,6 +35,7 @@
     "babel-plugin-transform-es3-property-literals": "^6.5.0",
     "babel-plugin-transform-object-rest-spread": "^6.6.5",
     "babel-plugin-transform-react-jsx-source": "^6.8.0",
+    "babel-plugin-transform-regenerator": "^6.26.0",
     "babel-preset-react": "^6.5.0",
     "babel-traverse": "^6.9.0",
     "babylon": "6.15.0",
@@ -103,40 +104,14 @@
     "linc": "node ./scripts/tasks/linc.js",
     "lint": "node ./scripts/tasks/eslint.js",
     "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json",
-    "test": "cross-env NODE_ENV=development jest",
-    "test-prod": "cross-env NODE_ENV=production jest",
+    "test": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.source.js",
+    "test-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.source.js",
+    "test-prod-build": "yarn test-build-prod",
+    "test-build": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.build.js",
+    "test-build-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.build.js",
     "flow": "node ./scripts/tasks/flow.js",
     "prettier": "node ./scripts/prettier/index.js write-changed",
     "prettier-all": "node ./scripts/prettier/index.js write",
     "version-check": "node ./scripts/tasks/version-check.js"
-  },
-  "jest": {
-    "modulePathIgnorePatterns": [
-      "<rootDir>/scripts/rollup/shims/",
-      "<rootDir>/scripts/bench/"
-    ],
-    "transform": {
-      ".*": "./scripts/jest/preprocessor.js"
-    },
-    "setupFiles": [
-      "./scripts/jest/environment.js"
-    ],
-    "setupTestFrameworkScriptFile": "./scripts/jest/test-framework-setup.js",
-    "testRegex": "/__tests__/.*(\\.js|\\.coffee|[^d]\\.ts)$",
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "node",
-      "coffee",
-      "ts"
-    ],
-    "roots": [
-      "<rootDir>/packages",
-      "<rootDir>/scripts"
-    ],
-    "collectCoverageFrom": [
-      "packages/**/*.js"
-    ],
-    "timers": "fake"
   }
 }

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

@@ -1709,15 +1709,25 @@ describe('ReactDOMComponent', () => {
     it('should warn about incorrect casing on event handlers (ssr)', () => {
       spyOnDev(console, 'error');
       ReactDOMServer.renderToString(
-        React.createElement('input', {type: 'text', onclick: '1'}),
+        React.createElement('input', {type: 'text', oninput: '1'}),
       );
       ReactDOMServer.renderToString(
         React.createElement('input', {type: 'text', onKeydown: '1'}),
       );
       if (__DEV__) {
-        expect(console.error.calls.count()).toBe(2);
-        expect(console.error.calls.argsFor(0)[0]).toContain('onClick');
-        expect(console.error.calls.argsFor(1)[0]).toContain('onKeyDown');
+        expect(console.error.calls.count()).toBe(1);
+        expect(console.error.calls.argsFor(0)[0]).toContain(
+          'Invalid event handler property `oninput`. ' +
+            'React events use the camelCase naming convention, ' +
+            // Note: we don't know the right event name so we
+            // use a generic one (onClick) as a suggestion.
+            // This is because we don't bundle the event system
+            // on the server.
+            'for example `onClick`.',
+        );
+        // We can't warn for `onKeydown` on the server because
+        // there is no way tell if this is a valid event or not
+        // without access to the event system (which we don't bundle).
       }
     });
 
@@ -1735,14 +1745,14 @@ describe('ReactDOMComponent', () => {
     it('should warn about incorrect casing on event handlers', () => {
       spyOnDev(console, 'error');
       ReactTestUtils.renderIntoDocument(
-        React.createElement('input', {type: 'text', onclick: '1'}),
+        React.createElement('input', {type: 'text', oninput: '1'}),
       );
       ReactTestUtils.renderIntoDocument(
         React.createElement('input', {type: 'text', onKeydown: '1'}),
       );
       if (__DEV__) {
         expect(console.error.calls.count()).toBe(2);
-        expect(console.error.calls.argsFor(0)[0]).toContain('onClick');
+        expect(console.error.calls.argsFor(0)[0]).toContain('onInput');
         expect(console.error.calls.argsFor(1)[0]).toContain('onKeyDown');
       }
     });
@@ -1860,15 +1870,20 @@ describe('ReactDOMComponent', () => {
     it('gives source code refs for unknown prop warning (ssr)', () => {
       spyOnDev(console, 'error');
       ReactDOMServer.renderToString(<div class="paladin" />);
-      ReactDOMServer.renderToString(<input type="text" onclick="1" />);
+      ReactDOMServer.renderToString(<input type="text" oninput="1" />);
       if (__DEV__) {
         expect(console.error.calls.count()).toBe(2);
         expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
           'Warning: Invalid DOM property `class`. Did you mean `className`?\n    in div (at **)',
         );
         expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe(
-          'Warning: Invalid event handler property `onclick`. Did you mean ' +
-            '`onClick`?\n    in input (at **)',
+          'Warning: Invalid event handler property `oninput`. ' +
+            // Note: we don't know the right event name so we
+            // use a generic one (onClick) as a suggestion.
+            // This is because we don't bundle the event system
+            // on the server.
+            'React events use the camelCase naming convention, for example `onClick`.' +
+            '\n    in input (at **)',
         );
       }
     });