[do not merge] Wait for feature element

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 initCallback
 
 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
+  initCallback = (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
+  initCallback = (doc, resolve) => doc.addEventListener('fixture', () => 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)
+  initCallback(doc, resolve)
 })

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import fixtureEvent from './features/fixture-event';
 
 class App extends React.Component {
   constructor(props) {
@@ -94,6 +95,12 @@ class App extends React.Component {
     this.setState({ feature });
   }
 
+  componentDidUpdate() {
+    const { feature } = this.state;
+    if (feature === null || React.Component.isPrototypeOf(feature)) return;
+    fixtureEvent(document);
+  }
+
   render() {
     const Feature = this.state.feature;
     return Feature ? <Feature /> : null;

packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import load from 'absoluteLoad'
+import fixtureEvent from '../fixture-event'
 
 export default class extends React.Component {
   constructor(props) {
@@ -13,6 +14,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-node-path">

packages/react-scripts/fixtures/kitchensink/src/features/fixture-event.js

@@ -0,0 +1,5 @@
+export default doc => {
+  const event = doc.createEvent('CustomEvent');
+  event.initCustomEvent('fixture', true, true, {});
+  doc.dispatchEvent(event);
+}

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load() {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-array-destructuring">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load(users) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-array-spread">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 async function load() {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-async-await">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 export default class extends React.Component {
   users = [
@@ -8,6 +9,10 @@ export default class extends React.Component {
     { id: 4, name: '4' }
   ];
 
+  componentDidMount() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-class-properties">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load(prefix) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-computed-properties">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 const styled = ([style]) => style.trim()
   .split(/\s*;\s*/)
@@ -26,6 +27,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     const veryInlineStyle = styled`
       background: palevioletred;

packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load(id = 0) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-default-parameters">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 async function load() {
   return { users: [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-destructuring-and-await">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function * load(limit) {
   let i = 1;
@@ -23,6 +24,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-generators">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load() {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-object-destructuring">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load(baseUser) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-object-spread">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load() {
   return Promise.resolve([
@@ -22,6 +23,10 @@ export default class extends React.Component {
     });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-promises">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load({ id, ...rest } = { id: 0, user: { id: 42, name: '42' } }) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-rest-and-default">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load({ id = 0, ...rest }) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-rest-parameters">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import fixtureEvent from '../fixture-event'
 
 function load(name) {
   return [
@@ -21,6 +22,10 @@ export default class extends React.Component {
     this.setState({ users });
   }
 
+  componentDidUpdate() {
+    fixtureEvent(document);
+  }
+
   render() {
     return (
       <div id="feature-template-interpolation">