Fix iOS e2e tests: bump react-native-babel-preset to ^5 (#19625)

Summary:
We opt in to version ^5 of the React Native Babel Preset, as required after the bump to Babel 7. This fixes the Objective-C end-to-end test failure in master. (Fixes #19538)

See 34bd776#commitcomment-29024085 for prior discussion.

There have already been several changes made to the repo during the transition to Babel 7. This PR brings all tests back to green and allows us to move forward with the 0.56 branch cut.

We also bump our tests to use Xcode 9.4.0 and iOS 11.4, the latest stable versions of both.

Once the 0.56 branch makes it to stable, we can change `react-native-babel-preset@latest` on npm to point to `[email protected]` (or newer), and undo the change made to `init.js` we made as part of this diff.

Wait for Circle CI to run: https://circleci.com/workflow-run/e39a66d7-bf8a-4b31-a22f-eef30a2c53bc

[GENERAL] [BREAKING] [Babel] - Bump React Native Babel Preset version used by RN CLI to Babel v7 compliant release
Closes #19625

Reviewed By: TheSavior

Differential Revision: D8343861

Pulled By: hramos

fbshipit-source-id: 42644d5b0bfb40a8bc592ae3461c5008deef8232

Author: hramos

.circleci/config.yml

@@ -198,7 +198,7 @@ aliases:
   # eslint sometimes runs into trouble generating the reports
   - &run-lint-checks
     name: Lint code
-    command: scripts/circleci/exec_swallow_error.sh yarn lint --format junit -o ~/react-native/reports/junit/js-lint-results.xml
+    command: scripts/circleci/exec_swallow_error.sh yarn lint --format junit -o ~/react-native/reports/junit/eslint/results.xml
     when: always
 
   - &run-flow-checks
@@ -274,6 +274,14 @@ aliases:
       mkdir -p ~/react-native/reports/junit/
       mkdir -p ~/react-native/reports/outputs/
 
+  - &boot-simulator-iphone
+    name: Boot iPhone Simulator
+    command: xcrun simctl boot "iPhone 5s" || true
+
+  - &boot-simulator-appletv
+    name: Boot Apple TV Simulator
+    command: xcrun simctl boot "Apple TV" || true
+
   - &run-objc-ios-tests
     name: iOS Test Suite
     command: ./scripts/objc-test-ios.sh test
@@ -282,9 +290,13 @@ aliases:
     name: tvOS Test Suite
     command: ./scripts/objc-test-tvos.sh test
 
+  - &run-e2e-tests
+    name: End-to-End Test Suite
+    command: node ./scripts/run-ci-e2e-tests.js --ios --tvos --js --retries 3;
+
   - &run-objc-ios-e2e-tests
     name: iOS End-to-End Test Suite
-    command: node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3;
+    command: node ./scripts/run-ci-e2e-tests.js --ios --retries 3;
 
   - &run-objc-tvos-e2e-tests
     name: tvOS End-to-End Test Suite
@@ -374,8 +386,7 @@ jobs:
       - attach_workspace:
           at: ~/react-native
 
-      - run: xcrun instruments -w "iPhone 5s (11.4)" || true
-      # See https://github.com/Homebrew/homebrew-core/issues/26358.
+      - run: *boot-simulator-iphone
       - run: brew install watchman
       - run: *run-objc-ios-tests
 
@@ -389,22 +400,35 @@ jobs:
       - attach_workspace:
           at: ~/react-native
 
-      - run: xcrun instruments -w "Apple TV (11.4)" || true
-      # See https://github.com/Homebrew/homebrew-core/issues/26358.
+      - run: *boot-simulator-appletv
       - run: brew install watchman
       - run: *run-objc-tvos-tests
 
       - store_test_results:
           path: ~/react-native/reports/junit
 
   # Runs end to end tests
-  test_ios_e2e:
+  test_end_to_end:
     <<: *macos_defaults
     steps:
       - attach_workspace:
           at: ~/react-native
 
-      - run: xcrun instruments -w "iPhone 5s (11.4)" || true
+      - run: *boot-simulator-iphone
+
+      - run:
+          name: Configure Environment Variables
+          command: |
+            echo 'export PATH=/usr/local/opt/node@8/bin:$PATH' >> $BASH_ENV
+            source $BASH_ENV
+
+      - run:
+          name: Install Node 8
+          command: |
+            brew install node@8
+            brew link node@8
+            node -v
+
       - run: *run-objc-ios-e2e-tests
 
       - store_test_results:
@@ -623,7 +647,7 @@ workflows:
             - checkout_code
 
       # End-to-end tests
-      - test_ios_e2e:
+      - test_end_to_end:
           filters: *filter-ignore-gh-pages
           requires:
             - checkout_code
@@ -670,11 +694,3 @@ workflows:
   #         filters: *filter-ignore-gh-pages
   #         requires:
   #           - checkout_code
-
-experimental:
-  notify:
-    webhooks:
-      - url: https://code.facebook.com/circle/webhook/
-    branches:
-      only:
-        - master

ContainerShip/scripts/run-android-ci-instrumentation-tests.js

@@ -28,7 +28,7 @@ const path = require('path');
 const colors = {
     GREEN: '\x1b[32m',
     RED: '\x1b[31m',
-    RESET: '\x1b[0m'
+    RESET: '\x1b[0m',
 };
 
 const test_opts = {
@@ -41,7 +41,7 @@ const test_opts = {
     TEST_TIMEOUT: parseInt(argv['test-timeout'] || 1000 * 60 * 10),
 
     OFFSET: argv.offset,
-    COUNT: argv.count
+    COUNT: argv.count,
 };
 
 let max_test_class_length = Number.NEGATIVE_INFINITY;
@@ -88,7 +88,7 @@ return async.mapSeries(testClasses, (clazz, callback) => {
 
     return async.retry(test_opts.RETRIES, (retryCb) => {
         const test_process = child_process.spawn('./ContainerShip/scripts/run-instrumentation-tests-via-adb-shell.sh', [test_opts.PACKAGE, clazz], {
-            stdio: 'inherit'
+            stdio: 'inherit',
         });
 
         const timeout = setTimeout(() => {
@@ -112,7 +112,7 @@ return async.mapSeries(testClasses, (clazz, callback) => {
     }, (err) => {
         return callback(null, {
             name: clazz,
-            status: err ? 'failure' : 'success'
+            status: err ? 'failure' : 'success',
         });
     });
 }, (err, results) => {

local-cli/init/init.js

@@ -99,7 +99,7 @@ function generateProject(destinationRoot, newProjectName, options) {
     });
   }
   if (!options['skip-jest']) {
-    const jestDeps = `jest babel-jest babel-preset-react-native react-test-renderer@${reactVersion}`;
+    const jestDeps = `jest babel-jest babel-preset-react-native@^5 react-test-renderer@${reactVersion}`;
     if (yarnVersion) {
       console.log('Adding Jest...');
       execSync(`yarn add ${jestDeps} --dev --exact`, {stdio: 'inherit'});

scripts/.tests.env

@@ -17,7 +17,7 @@ export AVD_NAME="testAVD"
 export AVD_ABI=x86
 
 ## IOS ##
-export IOS_TARGET_OS="11.3"
+export IOS_TARGET_OS="11.4"
 export IOS_DEVICE="iPhone 5s"
 
 export SCHEME="RNTester"

scripts/objc-test-ios.sh

@@ -13,9 +13,10 @@ ROOT=$(dirname "$SCRIPTS")
 
 cd "$ROOT"
 
-SCHEME="RNTester"
-SDK="iphonesimulator"
-DESTINATION="platform=iOS Simulator,name=iPhone 5s,OS=10.3.1"
+export TEST_NAME="iOS"
+export SCHEME="RNTester"
+export SDK="iphonesimulator"
+export DESTINATION="platform=iOS Simulator,name=iPhone 5s,OS=11.4"
 
 # If there's a "test" argument, pass it to the test script.
 . ./scripts/objc-test.sh $1

scripts/objc-test-tvos.sh

@@ -13,9 +13,10 @@ ROOT=$(dirname "$SCRIPTS")
 
 cd "$ROOT"
 
-SCHEME="RNTester-tvOS"
-SDK="appletvsimulator"
-DESTINATION="platform=tvOS Simulator,name=Apple TV 1080p,OS=10.2"
+export TEST_NAME="tvOS"
+export SCHEME="RNTester-tvOS"
+export SDK="appletvsimulator"
+export DESTINATION="platform=tvOS Simulator,name=Apple TV,OS=11.4"
 
 # If there's a "test" argument, pass it to the test script.
 . ./scripts/objc-test.sh $1

scripts/objc-test.sh

@@ -79,7 +79,7 @@ xcodebuild \
   -sdk $SDK \
   -destination "$DESTINATION" \
   build test \
-  | xcpretty --report junit --output ~/react-native/reports/junit/objc-xcodebuild-results.xml
+  | xcpretty --report junit --output "$HOME/react-native/reports/junit/$TEST_NAME/results.xml"
 
 else
 

scripts/run-ci-e2e-tests.js

@@ -104,8 +104,8 @@ try {
   cd('EndToEndTest');
 
   if (argv.android) {
-    echo('Running an Android e2e test');
-    echo('Installing e2e framework');
+    echo('Running an Android end-to-end test');
+    echo('Installing end-to-end framework');
     if (
       tryExecNTimes(
         () =>
@@ -155,14 +155,14 @@ try {
     SERVER_PID = packagerProcess.pid;
     // wait a bit to allow packager to startup
     exec('sleep 15s');
-    echo('Executing android e2e test');
+    echo('Executing android end-to-end test');
     if (
       tryExecNTimes(() => {
         exec('sleep 10s');
         return exec('node node_modules/.bin/_mocha android-e2e-test.js').code;
       }, numberOfRetries)
     ) {
-      echo('Failed to run Android e2e tests');
+      echo('Failed to run Android end-to-end tests');
       echo('Most likely the code is broken');
       exitCode = 1;
       throw Error(exitCode);
@@ -171,7 +171,7 @@ try {
 
   if (argv.ios || argv.tvos) {
     var iosTestType = argv.tvos ? 'tvOS' : 'iOS';
-    echo('Running the ' + iosTestType + 'app');
+    echo('Running the ' + iosTestType + ' app');
     cd('ios');
     // Make sure we installed local version of react-native
     if (!test('-e', path.join('EndToEndTest', path.basename(MARKER_IOS)))) {
@@ -193,22 +193,44 @@ try {
       'response=$(curl --write-out %{http_code} --silent --output /dev/null localhost:8081/index.bundle?platform=ios&dev=true)',
     );
     echo(`Starting packager server, ${SERVER_PID}`);
-    echo('Executing ' + iosTestType + ' e2e test');
+    echo('Executing ' + iosTestType + ' end-to-end test');
     if (
       tryExecNTimes(() => {
         exec('sleep 10s');
+        let destination = 'platform=iOS Simulator,name=iPhone 5s,OS=11.4';
+        let sdk = 'iphonesimulator';
+        let scheme = 'EndToEndTest';
+
         if (argv.tvos) {
-          return exec(
-            'xcodebuild -destination "platform=tvOS Simulator,name=Apple TV 1080p,OS=10.0" -scheme EndToEndTest-tvOS -sdk appletvsimulator test | xcpretty && exit ${PIPESTATUS[0]}',
-          ).code;
-        } else {
-          return exec(
-            'xcodebuild -destination "platform=iOS Simulator,name=iPhone 5s,OS=10.3.1" -scheme EndToEndTest -sdk iphonesimulator test | xcpretty && exit ${PIPESTATUS[0]}',
-          ).code;
+          destination = 'platform=tvOS Simulator,name=Apple TV,OS=11.4';
+          sdk = 'appletvsimulator';
+          scheme = 'EndToEndTest-tvOS';
         }
+
+        return exec(
+          [
+            'xcodebuild',
+            '-destination',
+            `"${destination}"`,
+            '-scheme',
+            `"${scheme}"`,
+            '-sdk',
+            sdk,
+            'test',
+          ].join(' ') +
+            ' | ' +
+            [
+              'xcpretty',
+              '--report',
+              'junit',
+              '--output',
+              `"~/react-native/reports/junit/${iosTestType}-e2e/results.xml"`,
+            ].join(' ') +
+            ' && exit ${PIPESTATUS[0]}',
+        ).code;
       }, numberOfRetries)
     ) {
-      echo('Failed to run ' + iosTestType + ' e2e tests');
+      echo('Failed to run ' + iosTestType + ' end-to-end tests');
       echo('Most likely the code is broken');
       exitCode = 1;
       throw Error(exitCode);