Fix e2e test (#561)

Author: gaearon

tasks/clean_pack.sh

@@ -11,15 +11,15 @@ cd "$(dirname "$0")"
 
 function cleanup {
   echo 'Cleaning up.'
-  cd $initial_path
+  cd $root_path
   # Uncomment when snapshot testing is enabled by default:
-  # rm ../template/src/__snapshots__/App.test.js.snap
+  # rm ./template/src/__snapshots__/App.test.js.snap
   rm -rf $temp_cli_path $temp_app_path
 }
 
-# error messages are redirected to stderr
+# Error messages are redirected to stderr
 function handle_error {
-  echo "$(basename $0): \033[31mERROR!\033[m An error was encountered executing \033[36mline $1\033[m." 1>&2;
+  echo "$(basename $0): ERROR! An error was encountered executing line $1." 1>&2;
   cleanup
   echo 'Exiting with error.' 1>&2;
   exit 1
@@ -40,27 +40,22 @@ trap 'set +x; handle_exit' SIGQUIT SIGTERM SIGINT SIGKILL SIGHUP
 # Echo every command being executed
 set -x
 
-# `tasks/clean_pack.sh` the two directories to make sure they are valid npm modules
-initial_path=$PWD
-
+# Go to root
 cd ..
-
-# A hacky way to avoid bundling dependencies.
-# Packing with them enabled takes too much memory, and Travis crashes.
-# End to end script is meant to run on Travis so it's not a big deal.
-# If you run it locally, you'll need to `git checkout -- package.json`.
-perl -i -p0e 's/bundledDependencies.*?]/bundledDependencies": []/s' package.json
-
-# Pack react-scripts
-npm install
-scripts_path=$PWD/`tasks/clean_pack.sh`
+root_path=$PWD
 
 # Lint
 ./node_modules/.bin/eslint --ignore-path .gitignore ./
 
+# ******************************************************************************
+# First, test the create-react-app development environment.
+# This does not affect our users but makes sure we can develop it.
+# ******************************************************************************
+
+npm install
+
 # Test local build command
 npm run build
-
 # Check for expected output
 test -e build/*.html
 test -e build/static/js/*.js
@@ -76,11 +71,49 @@ CI=true npm test
 # Test local start command
 npm start -- --smoke-test
 
-# Pack CLI
+# ******************************************************************************
+# Next, pack react-scripts and create-react-app so we can verify they work.
+# ******************************************************************************
+
+# Pack CLI (it doesn't need cleaning)
 cd global-cli
 npm install
 cli_path=$PWD/`npm pack`
 
+# Packing react-scripts takes more work because we want to clean it up first.
+# Create a temporary clean folder that contains production only code.
+# Do not overwrite any files in the current folder.
+clean_path=`mktemp -d 2>/dev/null || mktemp -d -t 'clean_path'`
+
+# Copy some of the project files to the temporary folder.
+# Exclude folders that definitely won’t be part of the package from processing.
+# We will strip the dev-only code there, `npm pack`, and copy the package back.
+cd $root_path
+rsync -av --exclude='.git' --exclude=$clean_path\
+  --exclude='node_modules' --exclude='build'\
+  './' $clean_path  >/dev/null
+
+# Open the clean folder
+cd $clean_path
+# Now remove all the code relevant to development of Create React App.
+files="$(find -L . -name "*.js" -type f)"
+for file in $files; do
+  sed -i.bak '/\/\/ @remove-on-publish-begin/,/\/\/ @remove-on-publish-end/d' $file
+  rm $file.bak
+done
+
+# A hacky way to avoid bundling dependencies.
+# Packing with them enabled takes too much memory, and Travis crashes.
+perl -i -p0e 's/bundledDependencies.*?]/bundledDependencies": []/s' package.json
+
+# Finally, pack react-scripts
+npm install
+scripts_path=$clean_path/`npm pack`
+
+# ******************************************************************************
+# Now that we have packed them, create a clean app folder and install them.
+# ******************************************************************************
+
 # Install the CLI in a temporary location
 # http://unix.stackexchange.com/a/84980
 temp_cli_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_cli_path'`
@@ -91,11 +124,17 @@ npm install $cli_path
 temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'`
 cd $temp_app_path
 node "$temp_cli_path"/node_modules/create-react-app/index.js --scripts-version=$scripts_path test-app
+
+# ******************************************************************************
+# 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-app
 
 # Test the build
 npm run build
-
 # Check for expected output
 test -e build/*.html
 test -e build/static/js/*.js
@@ -111,19 +150,26 @@ CI=true npm test
 # Test the server
 npm start -- --smoke-test
 
-# Eject and test the build
+# ******************************************************************************
+# Finally, let's check that everything still works after ejecting.
+# ******************************************************************************
+
+# Eject
 echo yes | npm run eject
-npm run build
 
+# Test the build
+npm run build
 # Check for expected output
 test -e build/*.html
 test -e build/static/js/*.js
 test -e build/static/css/*.css
 test -e build/static/media/*.svg
 test -e build/favicon.ico
 
-# Run tests, overring the watch option to disable it
-# TODO: make CI flag respected after ejecting as well
+# Run tests, overring the watch option to disable it.
+# `CI=true npm test` won't work here because `npm test` becomes just `jest`.
+# We should either teach Jest to respect CI env variable, or make
+# `scripts/test.js` survive ejection (right now it doesn't).
 npm test -- --watch=no
 # Uncomment when snapshot testing is enabled by default:
 # test -e src/__snapshots__/App.test.js.snap

tasks/e2e.sh

@@ -38,13 +38,13 @@ clean_path=`mktemp -d 2>/dev/null || mktemp -d -t 'clean_path'`
 
 # Copy some of the project files to the temporary folder.
 # Exclude folders that definitely won’t be part of the package from processing.
-# We will strip the dev-only code there, and then copy files back.
+# We will strip the dev-only code there, and publish from it.
 rsync -av --exclude='.git' --exclude=$clean_path\
   --exclude='node_modules' --exclude='build'\
   './' $clean_path  >/dev/null
+cd $clean_path
 
 # Now remove all the code relevant to development of Create React App.
-cd $clean_path
 files="$(find -L . -name "*.js" -type f)"
 for file in $files; do
   sed -i.bak '/\/\/ @remove-on-publish-begin/,/\/\/ @remove-on-publish-end/d' $file