diff --git a/packages/react-scripts/fixtures/kitchensink/.babelrc b/packages/react-scripts/fixtures/kitchensink/.babelrc index 5686105b95382cb798430626072886db23525570..c14b2828d168a6628f89fa528950d21734a7abcd 100644 --- a/packages/react-scripts/fixtures/kitchensink/.babelrc +++ b/packages/react-scripts/fixtures/kitchensink/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["latest"] + "presets": ["react-app"] } diff --git a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json index 62e0d34a35c5dbc92a74f8fc8289d803cff670ff..50511b3d16a2f0ea1555ca355afb04ec32b93c17 100644 --- a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json +++ b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json @@ -1,6 +1,5 @@ { "dependencies": { - "babel-preset-latest": "6.16.0", "babel-register": "6.22.0", "babel-polyfill": "6.20.0", "chai": "3.5.0", diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js index cf93b4c132b5f4a5692662737c82259fa37b90ce..fa297133f5d1a0c1524fb9d369fef2a7869aa1fd 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/App.js +++ b/packages/react-scripts/fixtures/kitchensink/src/App.js @@ -1,28 +1,40 @@ -import React from 'react'; +import React, { Component, PropTypes, createElement } from 'react'; -class BuiltEmitter extends React.Component { - constructor(props) { - super(props) - - this.callWhenDone = done => done(); +class BuiltEmitter extends Component { + static propTypes = { + feature: PropTypes.func.isRequired } componentDidMount() { - this.callWhenDone(() => document.dispatchEvent(new Event('ReactFeatureDidMount'))); + const { feature } = this.props + + // Class components must call this.props.onReady when they're ready for the test. + // We will assume functional components are ready immediately after mounting. + if (!Component.isPrototypeOf(feature)) { + this.handleReady(); + } } - render() { - const feature = React.cloneElement(React.Children.only(this.props.children), { - setCallWhenDone: done => { - this.callWhenDone = done; - } - }); + handleReady() { + document.dispatchEvent(new Event('ReactFeatureDidMount')); + } - return <div>{feature}</div>; + render() { + const { + props: { feature }, + handleReady + } = this; + return ( + <div> + {createElement(feature, { + onReady: handleReady + })} + </div> + ); } } -class App extends React.Component { +class App extends Component { constructor(props) { super(props); @@ -105,9 +117,7 @@ class App extends React.Component { case 'unknown-ext-inclusion': require.ensure([], () => this.setFeature(require('./features/webpack/UnknownExtInclusion').default)); break; - default: - this.setFeature(null); - break; + default: throw new Error('Unknown feature!'); } } @@ -116,8 +126,11 @@ class App extends React.Component { } render() { - const Feature = this.state.feature; - return Feature ? <BuiltEmitter><Feature /></BuiltEmitter> : null; + const { feature } = this.state; + if (feature !== null) { + return <BuiltEmitter feature={feature} />; + } + return null; } } diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.test.js b/packages/react-scripts/fixtures/kitchensink/src/App.test.js deleted file mode 100644 index b84af98d72031dc70085f2120c967b58adfcef6b..0000000000000000000000000000000000000000 --- a/packages/react-scripts/fixtures/kitchensink/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(<App />, div); -}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js index 1644b49ca041afb936106ab41cf2f5ad7e107bf7..deef80d20acbb95d658d64905ffadc2ddab7ad78 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js @@ -1,21 +1,23 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' import load from 'absoluteLoad' -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js index 05b981853b956a80cb9fcdd90260eabd0df7a9cf..81487d5596876b7c321ccf2a912fd5601777a5eb 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js @@ -5,6 +5,8 @@ import NodePath from './NodePath'; describe('NODE_PATH', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<NodePath />, div); + return new Promise(resolve => { + ReactDOM.render(<NodePath onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js index 1ee751af71ffe77e2b407331f2ef95494e468385..d07271ed6fcebc5813d05085e9bc5e3ed8cb2a8c 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load() { return [ @@ -9,21 +9,23 @@ function load() { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js index 617df2a6c6cd2dca4e4119a4521da82d71bb869f..05d14263d254f18ca1e5f41eba0859485fd123d7 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js @@ -5,6 +5,8 @@ import ArrayDestructuring from './ArrayDestructuring'; describe('array destructuring', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<ArrayDestructuring />, div); + return new Promise(resolve => { + ReactDOM.render(<ArrayDestructuring onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js index be6311980d7712c56fcc5a4bfdffea30d8488840..6cb2f6162c4d7d5b4c64cfa2045cce43a2d65304 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load(users) { return [ @@ -9,21 +9,23 @@ function load(users) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load([{ id: 42, name: '42' }]); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js index 85fade6e3a9dc22bd36cdaa31e46814512869106..a2191cf1c148177a2cbd623afb027fb4e3cf601d 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js @@ -5,6 +5,8 @@ import ArraySpread from './ArraySpread'; describe('array spread', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<ArraySpread />, div); + return new Promise(resolve => { + ReactDOM.render(<ArraySpread onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js index 84dd42e0a9b36aae9ee483e4374c9d40ed4766fa..9fe920514a1bdf2243dbf57e822af7ea8b8f91f2 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' async function load() { return [ @@ -9,21 +9,23 @@ async function load() { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = await load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js index 072f16fffeab8ef9ec475be134c83278c357d4d6..bc60c5b58f01a44fee3b1601dbef9070f1437ce7 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js @@ -5,6 +5,8 @@ import AsyncAwait from './AsyncAwait'; describe('async/await', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<AsyncAwait />, div); + return new Promise(resolve => { + ReactDOM.render(<AsyncAwait onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js index 65e500d645b3e45bb079280ad6ad8d83409e3762..726eba1524c587e73e8603f1da8b0729cb88a536 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js @@ -1,6 +1,10 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' + +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } -export default class extends React.Component { users = [ { id: 1, name: '1' }, { id: 2, name: '2' }, @@ -8,6 +12,10 @@ export default class extends React.Component { { id: 4, name: '4' } ]; + componentDidMount() { + this.props.onReady() + } + render() { return ( <div id="feature-class-properties"> diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js index 71d851dd2fca743274af963348fbaf715abc6965..898916b2f9ab9067d10c2aabc25fd87da0c70885 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js @@ -5,6 +5,8 @@ import ClassProperties from './ClassProperties'; describe('class properties', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<ClassProperties />, div); + return new Promise(resolve => { + ReactDOM.render(<ClassProperties onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js index b6111a149d9ce7b11ab9a628955541be834cd3a2..04dc7ba109b8c4d2b41ba6b2057f377620016878 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load(prefix) { return [ @@ -9,21 +9,23 @@ function load(prefix) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load('user_'); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.test.js index 4e9aaf17a1d73575d395078f6a7c16e6395c849b..0aa3d4d7ec644acd190f5debe9482ffe4f850915 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.test.js @@ -5,6 +5,8 @@ import ComputedProperties from './ComputedProperties'; describe('computed properties', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<ComputedProperties />, div); + return new Promise(resolve => { + ReactDOM.render(<ComputedProperties onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js index 8184d3bd4ba10dc5f8ef72776a0a981cff0e2048..c80f14dc882bdd7ad1995c61355650c3bc56d980 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' const styled = ([style]) => style.trim() .split(/\s*;\s*/) @@ -14,21 +14,23 @@ function load() { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.test.js index 10b1df278c113cb6f32ef901cb5788355ff3e11e..79af8dc5f6be38593c26af09be63e29a96f59bcd 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.test.js @@ -5,6 +5,8 @@ import CustomInterpolation from './CustomInterpolation'; describe('custom interpolation', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<CustomInterpolation />, div); + return new Promise(resolve => { + ReactDOM.render(<CustomInterpolation onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js index 637a239d7a4f57ec5823b7f796156eab2e1de649..0d7b77d87e35bc512ede44fea1a5e7aca938025a 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load(id = 0) { return [ @@ -9,21 +9,23 @@ function load(id = 0) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.test.js index b5ece2446812211948e55202b0e36de4fee3937f..c4a336563aca1a861c221f8123b6631cf2b8bfed 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.test.js @@ -5,6 +5,8 @@ import DefaultParameters from './DefaultParameters'; describe('default parameters', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<DefaultParameters />, div); + return new Promise(resolve => { + ReactDOM.render(<DefaultParameters onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js index e28e0bb3643688995d8967a487c44fb938e4730f..40f5175420293aaa8e8838cb475fd5b4dcea6e69 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' async function load() { return { users: [ @@ -9,21 +9,23 @@ async function load() { ] }; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const { users } = await load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.test.js index 14521e3079853a0e3ab22a5577e0dc6539bd4a61..96b361c742e52dcbaffcac3e0f069895c28cbaa9 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.test.js @@ -5,6 +5,8 @@ import DestructuringAndAwait from './DestructuringAndAwait'; describe('destructuring and await', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<DestructuringAndAwait />, div); + return new Promise(resolve => { + ReactDOM.render(<DestructuringAndAwait onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js index a20fc19b75f17e19938431ee99d497d8af515cdf..6bb64f9103f65523043fb2cfcbf3f69b2453a904 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function * load(limit) { let i = 1; @@ -8,15 +8,13 @@ function * load(limit) { } } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } @@ -25,7 +23,11 @@ export default class extends React.Component { for (let user of load(4)) { users.push(user); } - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.test.js index 1fd36cdbed325546293f727b3e97334fee74d5c3..4e6b8d1d9ad0848518719addb0b128089ccc7f10 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.test.js @@ -5,6 +5,8 @@ import Generators from './Generators'; describe('generators', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<Generators />, div); + return new Promise(resolve => { + ReactDOM.render(<Generators onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js index db377cee5e6c3cea014a7b749a172fde43090b0a..3235a99104ceab5e4759dcaf0140a689efe870a0 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load() { return [ @@ -9,21 +9,23 @@ function load() { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.test.js index 7ed28147decd167665b76d31935577f39d00b6f1..0a21b291bc644a411e61713f6688816fc2001336 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.test.js @@ -5,6 +5,8 @@ import ObjectDestructuring from './ObjectDestructuring'; describe('object destructuring', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<ObjectDestructuring />, div); + return new Promise(resolve => { + ReactDOM.render(<ObjectDestructuring onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js index 72356fb9404453d53f521dfb829788fd9f20c3ab..fb43bf8676eb52e9a2cf0d5ee57de7f7da2d8aaa 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load(baseUser) { return [ @@ -9,21 +9,23 @@ function load(baseUser) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load({ age: 42 }); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.test.js index 9de96c26418ac6a5b65b2f926ab9762dfa9ebeda..4ca5d2b9ab13cfabfe900420d52c85232de96468 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.test.js @@ -5,6 +5,8 @@ import ObjectSpread from './ObjectSpread'; describe('object spread', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<ObjectSpread />, div); + return new Promise(resolve => { + ReactDOM.render(<ObjectSpread onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js index 9eb8c20f790d5f077dc36a50ff026689b31c1e30..63f38fed4738608f08a8900792becb53d2c86dbf 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load() { return Promise.resolve([ @@ -9,24 +9,26 @@ function load() { ]); } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } componentDidMount() { load().then(users => { - this.setState({ users }, () => this.done()); + this.setState({ users }); }); } + componentDidUpdate() { + this.props.onReady(); + } + render() { return ( <div id="feature-promises"> diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js index 96b4d298d7caa3d451418c6f35f60db0fd36eaf5..36c5984a4b53860cdf62f71abcb744b9290a7853 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js @@ -5,6 +5,8 @@ import Promises from './Promises'; describe('promises', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<Promises />, div); + return new Promise(resolve => { + ReactDOM.render(<Promises onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js index 94b75980835afc0adbfdb69f74d30dd43757196c..7783868ab4de8e8dcb4fb46537fd5297fc7306a5 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load({ id, ...rest } = { id: 0, user: { id: 42, name: '42' } }) { return [ @@ -9,21 +9,23 @@ function load({ id, ...rest } = { id: 0, user: { id: 42, name: '42' } }) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.test.js index 95f4a19fa0baac15e700c155a3cd447274b6042e..22a91be084761725047646a3ca5c28359eab3b53 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.test.js @@ -5,6 +5,8 @@ import RestAndDefault from './RestAndDefault'; describe('rest + default', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<RestAndDefault />, div); + return new Promise(resolve => { + ReactDOM.render(<RestAndDefault onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js index c1cd63e887e124a091d51e98d3fe76a962b8a27b..cf216ce01f2c11fe212b5646948d2312c4d9b885 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load({ id = 0, ...rest }) { return [ @@ -9,21 +9,23 @@ function load({ id = 0, ...rest }) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load({ id: 0, user: { id: 42, name: '42' } }); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.test.js index 8e097713318eac8e14153ac596f93c7374c27c6d..f1f8e35e3701dfd52d529d6420de2254c52b0012 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.test.js @@ -5,6 +5,8 @@ import RestParameters from './RestParameters'; describe('rest parameters', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<RestParameters />, div); + return new Promise(resolve => { + ReactDOM.render(<RestParameters onReady={resolve} />, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js index 33b004722d83e548d368d32bf5b2fe0fb40ffe60..dd6bf49b11d5e387350a2a9b8cbe4f7068790063 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load(name) { return [ @@ -9,21 +9,23 @@ function load(name) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load('user_'); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.test.js index b49af029a4445349020b92998a760ad7a0ed909d..41a5fad2c5f1f8ee7c37fe6520d23cd8f9cb5186 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.test.js @@ -5,6 +5,8 @@ import TemplateInterpolation from './TemplateInterpolation'; describe('template interpolation', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<TemplateInterpolation />, div); + return new Promise(resolve => { + ReactDOM.render(<TemplateInterpolation onReady={resolve} />, div); + }); }); }); diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 892230ab747de8cb03e24d08c43e2932679196e2..c681580b0c7737aa1fb3c61d128faae150e7ed89 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -110,6 +110,9 @@ create_react_app --scripts-version=$scripts_path --internal-testing-template=$ro # Enter the app directory cd test-kitchensink +# Link to our preset +npm link $root_path/packages/babel-preset-react-app + # Test the build NODE_PATH=src REACT_APP_SHELL_ENV_MESSAGE=fromtheshell npm run build # Check for expected output @@ -120,6 +123,7 @@ test -e build/static/js/main.*.js REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true \ NODE_PATH=src \ + NODE_ENV=test \ npm test -- --no-cache --testPathPattern="/src/" # Test "development" environment @@ -132,18 +136,23 @@ grep -q 'The app is running at:' <(tail -f $tmp_server_log) E2E_URL="http://localhost:3001" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true NODE_PATH=src \ + NODE_ENV=development \ node node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js # Test "production" environment E2E_FILE=./build/index.html \ CI=true \ NODE_PATH=src \ + NODE_ENV=production \ node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js # ****************************************************************************** # Finally, let's check that everything still works after ejecting. # ****************************************************************************** +# Unlink our preset +npm unlink $root_path/packages/babel-preset-react-app + # Eject... echo yes | npm run eject @@ -153,7 +162,7 @@ npm link $root_path/packages/eslint-config-react-app npm link $root_path/packages/react-dev-utils npm link $root_path/packages/react-scripts -# ...and we need to remove template's .babelrc +# ...and we need to remove template's .babelrc rm .babelrc # Test the build @@ -166,6 +175,7 @@ test -e build/static/js/main.*.js REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true \ NODE_PATH=src \ + NODE_ENV=test \ npm test -- --no-cache --testPathPattern="/src/" # Test "development" environment @@ -178,7 +188,7 @@ grep -q 'The app is running at:' <(tail -f $tmp_server_log) E2E_URL="http://localhost:3002" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true NODE_PATH=src \ - NODE_ENV=production \ + NODE_ENV=development \ node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js # Test "production" environment