Add linked modules test (0.9.x) (#1912)

* Add linked modules test

* Keep fallback after eject

Author: Timer

packages/react-scripts/config/webpack.config.dev.js

@@ -96,16 +96,16 @@ module.exports = {
       'react-native': 'react-native-web'
     }
   },
-  // @remove-on-eject-begin
-  // Resolve loaders (webpack plugins for CSS, images, transpilation) from the
-  // directory of `react-scripts` itself rather than the project directory.
   resolveLoader: {
+    // @remove-on-eject-begin
+    // Resolve loaders (webpack plugins for CSS, images, transpilation) from the
+    // directory of `react-scripts` itself rather than the project directory.
     root: paths.ownNodeModules,
+    moduleTemplates: ['*-loader'],
+    // @remove-on-eject-end
     // Fallback to any hoisted modules when dealing with linked libraries
-    fallback: paths.appNodeModules,
-    moduleTemplates: ['*-loader']
+    fallback: paths.appNodeModules
   },
-  // @remove-on-eject-end
   module: {
     // First, run the linter.
     // It's important to do this before Babel processes the JS.

packages/react-scripts/config/webpack.config.prod.js

@@ -100,16 +100,16 @@ module.exports = {
       'react-native': 'react-native-web'
     }
   },
-  // @remove-on-eject-begin
-  // Resolve loaders (webpack plugins for CSS, images, transpilation) from the
-  // directory of `react-scripts` itself rather than the project directory.
   resolveLoader: {
+    // @remove-on-eject-begin
+    // Resolve loaders (webpack plugins for CSS, images, transpilation) from the
+    // directory of `react-scripts` itself rather than the project directory.
     root: paths.ownNodeModules,
+    moduleTemplates: ['*-loader'],
+    // @remove-on-eject-end
     // Fallback to any hoisted modules when dealing with linked libraries
-    fallback: paths.appNodeModules,
-    moduleTemplates: ['*-loader']
+    fallback: paths.appNodeModules
   },
-  // @remove-on-eject-end
   module: {
     // First, run the linter.
     // It's important to do this before Babel processes the JS.

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

@@ -4,6 +4,7 @@
     "babel-polyfill": "6.20.0",
     "chai": "3.5.0",
     "jsdom": "9.8.3",
-    "mocha": "3.2.0"
+    "mocha": "3.2.0",
+    "test-integrity": "1.0.0"
   }
 }

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

@@ -38,6 +38,12 @@ describe('Integration', () => {
       expect(doc.getElementById('feature-json-inclusion').textContent).to.equal('This is an abstract.')
     })
 
+    it('linked modules', async () => {
+      const doc = await initDOM('linked-modules')
+
+      expect(doc.getElementById('feature-linked-modules').textContent).to.equal('2.0.0')
+    })
+
     it('svg inclusion', async () => {
       const doc = await initDOM('svg-inclusion')
 

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

@@ -94,6 +94,9 @@ class App extends Component {
       case 'json-inclusion':
         require.ensure([], () => this.setFeature(require('./features/webpack/JsonInclusion').default));
         break;
+      case 'linked-modules':
+        require.ensure([], () => this.setFeature(require('./features/webpack/LinkedModules').default));
+        break;
       case 'node-path':
         require.ensure([], () => this.setFeature(require('./features/env/NodePath').default));
         break;

packages/react-scripts/fixtures/kitchensink/src/features/webpack/LinkedModules.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+import React from 'react';
+import './assets/style.css';
+import { test, version } from 'test-integrity';
+
+export default () => {
+  const v = version();
+  if (!test() || v !== '2.0.0') {
+    throw new Error('Functionality test did not pass.');
+  }
+  return <p id="feature-linked-modules">{v}</p>;
+};

packages/react-scripts/fixtures/kitchensink/src/features/webpack/LinkedModules.test.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { test, version } from 'test-integrity';
+import LinkedModules from './LinkedModules';
+
+describe('linked modules', () => {
+  it('has integrity', () => {
+    expect(test());
+    expect(version() === '2.0.0');
+  });
+
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<LinkedModules />, div);
+  });
+});

tasks/e2e-kitchensink.sh

@@ -14,17 +14,18 @@
 # Start in tasks/ even if run from root directory
 cd "$(dirname "$0")"
 
-# CLI and app temporary locations
+# CLI, app, and test module temporary locations
 # http://unix.stackexchange.com/a/84980
 temp_cli_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_cli_path'`
 temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'`
+temp_module_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_module_path'`
 
 function cleanup {
   echo 'Cleaning up.'
   ps -ef | grep 'react-scripts' | grep -v grep | awk '{print $2}' | xargs kill -s 9
   cd "$root_path"
   # TODO: fix "Device or resource busy" and remove ``|| $CI`
-  rm -rf "$temp_cli_path" $temp_app_path || $CI
+  rm -rf "$temp_cli_path" "$temp_app_path" "$temp_module_path" || $CI
 }
 
 # Error messages are redirected to stderr
@@ -111,17 +112,24 @@ npm install "$cli_path"
 cd $temp_app_path
 create_react_app --scripts-version="$scripts_path" --internal-testing-template="$root_path"/packages/react-scripts/fixtures/kitchensink test-kitchensink
 
+# Install the test module
+cd "$temp_module_path"
+npm install test-integrity@^2.0.1
+
 # ******************************************************************************
 # Now that we used create-react-app to create an app depending on react-scripts,
 # let's make sure all npm scripts are in the working state.
 # ******************************************************************************
 
 # Enter the app directory
-cd test-kitchensink
+cd "$temp_app_path/test-kitchensink"
 
 # Link to our preset
 npm link "$root_path"/packages/babel-preset-react-app
 
+# Link to test module
+npm link "$temp_module_path/node_modules/test-integrity"
+
 # Test the build
 REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   NODE_PATH=src \
@@ -185,6 +193,8 @@ npm link "$root_path"/packages/react-scripts
 
 # ...and we need to remove template's .babelrc
 rm .babelrc
+# Link to test module
+npm link "$temp_module_path/node_modules/test-integrity"
 
 # Test the build
 REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \