E2E: run tests when react is ready

Author: EnoahNetzach

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

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "babel-preset-latest": "6.16.0",
-    "babel-register": "6.18.0",
+    "babel-register": "6.22.0",
     "babel-polyfill": "6.20.0",
     "chai": "3.5.0",
     "jsdom": "9.8.3",

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

@@ -5,9 +5,7 @@ const path = require('path')
 
 let getMarkup
 let resourceLoader
-// this value could be tweaked in order to let the resource
-// retriever get every file and jsdom execute react
-let timeToWaitForJsToExecute
+let resolveOnReady
 
 if (process.env.E2E_FILE) {
   const file = path.isAbsolute(process.env.E2E_FILE)
@@ -22,7 +20,7 @@ if (process.env.E2E_FILE) {
     fs.readFileSync(path.join(path.dirname(file), resource.url.pathname), 'utf8')
   )
 
-  timeToWaitForJsToExecute = 0
+  resolveOnReady = (doc, resolve) => doc.defaultView.addEventListener('load', () => resolve(doc), false)
 } else if (process.env.E2E_URL) {
   getMarkup = () => new Promise(resolve => {
     http.get(process.env.E2E_URL, (res) => {
@@ -36,7 +34,7 @@ if (process.env.E2E_FILE) {
     return resource.defaultFetch(callback)
   }
 
-  timeToWaitForJsToExecute = 100
+  resolveOnReady = (doc, resolve) => doc.addEventListener('ReactFeatureDidMount', () => resolve(doc), false)
 } else {
   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.')).toBeUndefined()
@@ -47,16 +45,14 @@ export default feature => new Promise(async resolve => {
   const markup = await getMarkup()
   const host = process.env.E2E_URL || 'http://localhost:3000'
   const doc = jsdom.jsdom(markup, {
-    features : {
-      FetchExternalResources : ['script', 'css'],
-      ProcessExternalResources : ['script'],
+    features: {
+      FetchExternalResources: ['script', 'css'],
+      ProcessExternalResources: ['script'],
     },
     resourceLoader,
     url: `${host}#${feature}`,
     virtualConsole: jsdom.createVirtualConsole().sendTo(console),
   })
 
-  doc.defaultView.addEventListener('load', () => {
-    setTimeout(() => resolve(doc), timeToWaitForJsToExecute)
-  }, false)
+  resolveOnReady(doc, resolve)
 })

packages/react-scripts/fixtures/kitchensink/src/App.js

@@ -1,5 +1,15 @@
 import React from 'react';
 
+class BuiltEmitter extends React.Component {
+  componentDidMount() {
+    document.dispatchEvent(new Event('ReactFeatureDidMount'));
+  }
+
+  render() {
+    return <div>{this.props.children}</div>
+  }
+}
+
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -96,7 +106,7 @@ class App extends React.Component {
 
   render() {
     const Feature = this.state.feature;
-    return Feature ? <Feature /> : null;
+    return Feature ? <BuiltEmitter><Feature /></BuiltEmitter> : null;
   }
 }
 

tasks/e2e-kitchensink.sh

@@ -151,7 +151,7 @@ E2E_URL="http://localhost:3001" \
 E2E_FILE=./build/index.html \
   CI=true \
   NODE_PATH=src \
-  node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.js
+  node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js
 
 # Uncomment when snapshot testing is enabled by default:
 # test -e src/__snapshots__/App.test.js.snap
@@ -182,6 +182,8 @@ NODE_PATH=src REACT_APP_SHELL_ENV_MESSAGE=fromtheshell npm run build
 test -e build/*.html
 test -e build/static/js/main.*.js
 
+cat package.json
+
 # Unit tests
 REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   CI=true \
@@ -199,14 +201,14 @@ E2E_URL="http://localhost:3002" \
   REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   CI=true NODE_PATH=src \
   NODE_ENV=production \
-  node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.js
+  node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js
 
 # Test "production" environment
 E2E_FILE=./build/index.html \
   CI=true \
   NODE_ENV=production \
   NODE_PATH=src \
-  node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.js
+  node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js
 
 # Uncomment when snapshot testing is enabled by default:
 # test -e src/__snapshots__/App.test.js.snap