Use npm v7 with workspaces for local development and testing (#11304)

Author: lukekarrys

.github/workflows/build.yml

@@ -6,8 +6,14 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          cache: 'npm'
+      - name: Install npm@7
+        run: npm i -g npm@7
       - name: Install
-        run: yarn --no-progress --non-interactive --no-lockfile
+        run: npm ci --prefer-offline
       - name: Build
-        run: yarn build
+        run: npm run build

.github/workflows/integration.yml

@@ -18,19 +18,13 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Setup node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
-      - name: Cache dependencies
-        id: cache
-        uses: actions/cache@v2
-        with:
-          path: |
-            node_modules
-            */*/node_modules
-          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock', './yarn.lock') }}
+          cache: 'npm'
+      - name: Install npm@7
+        run: npm i -g npm@7
       - name: Install packages
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile --prefer-offline
+        run: npm ci --prefer-offline
       - name: Run integration tests
-        run: yarn test:integration
+        run: npm run test:integration

.github/workflows/lint.yml

@@ -6,8 +6,14 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          cache: 'npm'
+      - name: Install npm@7
+        run: npm i -g npm@7
       - name: Install
-        run: yarn --no-progress --non-interactive --no-lockfile
+        run: npm ci --prefer-offline
       - name: Alex
-        run: yarn alex
+        run: npm run alex

.gitignore

@@ -12,4 +12,3 @@ yarn-debug.log*
 yarn-error.log*
 /.changelog
 .npm/
-yarn.lock

CONTRIBUTING.md

@@ -90,24 +90,26 @@ All functionality must be retained (and configuration given to the user) if they
 
 ## Setting Up a Local Copy
 
+You will need `npm@7` and `yarn@1` in order to bootstrap and test a local copy of this repo.
+
 1. Clone the repo with `git clone https://github.com/facebook/create-react-app`
 
-2. Run `yarn` in the root `create-react-app` folder.
+2. Run `npm install` in the root `create-react-app` folder.
 
-Once it is done, you can modify any file locally and run `yarn start`, `yarn test` or `yarn build` like you can in a generated project. It will serve the application from the files located in `packages/cra-template/template`.
+Once it is done, you can modify any file locally and run `npm start`, `npm test` or `npm run build` like you can in a generated project. It will serve the application from the files located in `packages/cra-template/template`.
 
 If you want to try out the end-to-end flow with the global CLI, you can do this too:
 
 ```sh
-yarn create-react-app my-app
+npx create-react-app my-app
 cd my-app
 ```
 
-and then run `yarn start` or `yarn build`.
+and then run `npm start` or `npm run build`.
 
 ## Contributing to E2E (end to end) tests
 
-**TL;DR** use the command `yarn e2e:docker` to run unit and e2e tests.
+**TL;DR** use the command `npm run e2e:docker` to run unit and e2e tests.
 
 More detailed information are in the dedicated [README](/test/README.md).
 
@@ -143,11 +145,11 @@ By default git would use `CRLF` line endings which would cause the scripts to fa
 2. Close the milestone and create a new one for the next release.
 3. In most releases, only `react-scripts` needs to be released. If you don’t have any changes to the `packages/create-react-app` folder, you don’t need to bump its version or publish it (the publish script will publish only changed packages).
 4. Note that files in `packages/create-react-app` should be modified with extreme caution. Since it’s a global CLI, any version of `create-react-app` (global CLI) including very old ones should work with the latest version of `react-scripts`.
-5. Run `yarn compile:lockfile`. The command will generate an updated lockfile in `packages/create-react-app` that should be committed.
+5. Run `npm run compile:lockfile`. The command will generate an updated lockfile in `packages/create-react-app` that should be committed.
 6. Create a change log entry for the release:
 
 - You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."`
-- Run `yarn changelog`. The command will find all the labeled pull requests merged since the last release and group them by the label and affected packages, and create a change log entry with all the changes and links to PRs and their authors. Copy and paste it to `CHANGELOG.md`.
+- Run `npm run changelog`. The command will find all the labeled pull requests merged since the last release and group them by the label and affected packages, and create a change log entry with all the changes and links to PRs and their authors. Copy and paste it to `CHANGELOG.md`.
 - Add a four-space indented paragraph after each non-trivial list item, explaining what changed and why. For each breaking change also write who it affects and instructions for migrating existing code.
 - Maybe add some newlines here and there. Preview the result on GitHub to get a feel for it. Changelog generator output is a bit too terse for my taste, so try to make it visually pleasing and well grouped.
 
@@ -161,9 +163,9 @@ Make sure to test the released version! If you want to be extra careful, you can
 ## Releasing the Docs
 
 1. Go to the `docusaurus/website` directory
-2. Run `yarn build`
+2. Run `npm run build`
 3. You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."`
-4. Run `GIT_USER=<GITHUB_USERNAME> CURRENT_BRANCH=main USE_SSH=true yarn deploy`
+4. Run `GIT_USER=<GITHUB_USERNAME> CURRENT_BRANCH=main USE_SSH=true npm run deploy`
 
 ---
 

azure-pipelines-test-job.yml

@@ -31,8 +31,11 @@ jobs:
           versionSpec: $(nodeVersion)
         displayName: 'Install Node.js'
 
-      - script: yarn --frozen-lockfile
-        displayName: 'Run yarn'
+      - script: npm i -g npm@7
+        displayName: 'Update npm to v7'
+
+      - script: npm ci
+        displayName: 'Run npm ci'
 
       - bash: ${{ parameters.testScript }}
         displayName: 'Run tests'

docusaurus/website/README.md

@@ -5,29 +5,29 @@ This website is built using Docusaurus 2, a modern static website generator.
 ### Installation
 
 ```
-$ yarn
+$ npm install
 ```
 
 ### Local Development
 
 ```
-$ yarn start
+$ npm start
 ```
 
 This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
 
 ### Build
 
 ```
-$ yarn build
+$ npm run build
 ```
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
 ### Deployment
 
 ```
-$ GIT_USER=<Your GitHub username> USE_SSH=1 yarn deploy
+$ GIT_USER=<Your GitHub username> USE_SSH=1 npm run deploy
 ```
 
 If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docusaurus/website/yarn.lock

@@ -1,5 +1,5 @@
 [build]
   base    = "docusaurus/website"
   publish = "docusaurus/website/build"
-  command = "yarn build"
+  command = "npm run build"
 

netlify.toml

@@ -9,7 +9,7 @@
     "create-react-app": "node tasks/cra.js",
     "e2e": "tasks/e2e-simple.sh",
     "e2e:docker": "tasks/local-test.sh",
-    "postinstall": "cd packages/react-error-overlay/ && yarn build:prod",
+    "postinstall": "npm run build:prod -w react-error-overlay",
     "publish": "tasks/publish.sh",
     "start": "cd packages/react-scripts && node bin/react-scripts.js start",
     "screencast": "node ./tasks/screencast.js",

package-lock.json

@@ -8,7 +8,8 @@
     "start": "cross-env NODE_ENV=development node build.js --watch",
     "test": "cross-env NODE_ENV=test jest",
     "build": "cross-env NODE_ENV=development node build.js",
-    "build:prod": "cross-env NODE_ENV=production node build.js"
+    "build:prod": "cross-env NODE_ENV=production node build.js",
+    "flow": "flow"
   },
   "repository": {
     "type": "git",
@@ -58,7 +59,7 @@
     "rimraf": "^3.0.2",
     "settle-promise": "1.0.0",
     "source-map": "0.5.7",
-    "webpack": "^5.41.1"
+    "webpack": "5.41.1"
   },
   "jest": {
     "setupFiles": [

package.json

@@ -5,10 +5,10 @@ This is an end to end kitchensink test suite, but has multiple usages in it.
 ## Running the test suite
 
 Tests are automatically run by the CI tools.
-In order to run them locally, without having to manually install and configure everything, the `yarn e2e:docker` CLI command can be used.
+In order to run them locally, without having to manually install and configure everything, the `npm run e2e:docker` CLI command can be used.
 
 This is a script that runs a **Docker** container, where the node version, git branch to clone, test suite, and whether to run it with `yarn` or `npm` can be chosen.
-Run `yarn e2e:docker --help` to get additional info.
+Run `npm run e2e:docker --help` to get additional info.
 
 If you need guidance installing **Docker**, you should follow their [official docs](https://docs.docker.com/engine/installation/).
 

packages/react-error-overlay/package.json

@@ -39,7 +39,7 @@ process.on('uncaughtException', handleError);
 
 console.log();
 console.log('-------------------------------------------------------');
-console.log('Assuming you have already run `yarn` to update the deps.');
+console.log('Assuming you have already run `npm install` to update the deps.');
 console.log('If not, remember to do this before testing!');
 console.log('-------------------------------------------------------');
 console.log();
@@ -106,7 +106,7 @@ const scriptsFileName = cp
 const scriptsPath = path.join(packagesDir, 'react-scripts', scriptsFileName);
 
 // Now that we have packed them, call the global CLI.
-cp.execSync('yarn cache clean');
+cp.execSync('npm cache clean');
 
 const args = process.argv.slice(2);
 

packages/react-scripts/fixtures/kitchensink/template/README.md

@@ -67,7 +67,7 @@ then
 fi
 
 # Bootstrap monorepo
-yarn
+npm install
 
 # ******************************************************************************
 # First, publish the monorepo.

tasks/cra.js

@@ -89,7 +89,7 @@ then
 fi
 
 # Bootstrap monorepo
-yarn
+npm install
 
 # ******************************************************************************
 # First, publish the monorepo.
@@ -163,9 +163,9 @@ exists src/react-app-env.d.ts
 checkTypeScriptDependencies
 
 # Check that the TypeScript template passes smoke tests, build, and normal tests
-yarn start --smoke-test
-yarn build
-CI=true yarn test
+npm start -- --smoke-test
+npm run build
+CI=true npm test
 
 # Check eject behaves and works
 
@@ -180,9 +180,9 @@ yarn add @babel/plugin-transform-react-jsx-source @babel/plugin-syntax-jsx @babe
 exists src/react-app-env.d.ts
 
 # Check that the TypeScript template passes ejected smoke tests, build, and normal tests
-yarn start --smoke-test
-yarn build
-CI=true yarn test
+npm start -- --smoke-test
+npm run build
+CI=true npm test
 
 # ******************************************************************************
 # Test --scripts-version with a tarball url
@@ -258,20 +258,20 @@ cd test-app-nested-paths-t1
 mkdir -p test-app-nested-paths-t1/aa/bb/cc/dd
 npx create-react-app test-app-nested-paths-t1/aa/bb/cc/dd
 cd test-app-nested-paths-t1/aa/bb/cc/dd
-yarn start --smoke-test
+npm start -- --smoke-test
 
 # Testing a path that does not exist
 cd "$temp_app_path"
 npx create-react-app test-app-nested-paths-t2/aa/bb/cc/dd
 cd test-app-nested-paths-t2/aa/bb/cc/dd
-yarn start --smoke-test
+npm start -- --smoke-test
 
 # Testing a path that is half exists
 cd "$temp_app_path"
 mkdir -p test-app-nested-paths-t3/aa
 npx create-react-app test-app-nested-paths-t3/aa/bb/cc/dd
 cd test-app-nested-paths-t3/aa/bb/cc/dd
-yarn start --smoke-test
+npm start -- --smoke-test
 
 # ******************************************************************************
 # Test when PnP is enabled
@@ -281,8 +281,8 @@ npx create-react-app test-app-pnp --use-pnp
 cd test-app-pnp
 ! exists node_modules
 exists .pnp.js
-yarn start --smoke-test
-yarn build
+npm start -- --smoke-test
+npm run build
 
 # Cleanup
 cleanup

tasks/e2e-behavior.sh

@@ -75,7 +75,7 @@ then
 fi
 
 # Bootstrap monorepo
-yarn
+npm install
 
 # ******************************************************************************
 # First, publish the monorepo.
@@ -97,7 +97,7 @@ npx create-react-app test-kitchensink --template=file:"$root_path"/packages/reac
 
 # Install the test module
 cd "$temp_module_path"
-yarn add test-integrity@^2.0.1
+npm install test-integrity@^2.0.1
 
 # ******************************************************************************
 # Now that we used create-react-app to create an app depending on react-scripts,
@@ -110,9 +110,6 @@ cd "$temp_app_path/test-kitchensink"
 # In kitchensink, we want to test all transforms
 export BROWSERSLIST='ie 9'
 
-# Link to test module
-npm link "$temp_module_path/node_modules/test-integrity"
-
 # ******************************************************************************
 # Finally, let's check that everything still works after ejecting.
 # ******************************************************************************
@@ -124,14 +121,11 @@ echo yes | npm run eject
 rm yarn.lock
 yarn add @babel/plugin-transform-react-jsx-source @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx @babel/plugin-transform-react-jsx-self
 
-# 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 \
   PUBLIC_URL=http://www.example.org/spa/ \
-  yarn build
+  npm run build
 
 # Check for expected output
 exists build/*.html
@@ -142,14 +136,14 @@ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   CI=true \
   NODE_PATH=src \
   NODE_ENV=test \
-  yarn test --no-cache --runInBand --testPathPattern=src
+  npm test --no-cache --runInBand --testPathPattern=src
 
 # Test "development" environment
 tmp_server_log=`mktemp`
 PORT=3002 \
   REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   NODE_PATH=src \
-  nohup yarn start &>$tmp_server_log &
+  nohup npm start &>$tmp_server_log &
 grep -q 'You can now view' <(tail -f $tmp_server_log)
 E2E_URL="http://localhost:3002" \
   REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \

tasks/e2e-installs.sh

@@ -75,7 +75,7 @@ then
 fi
 
 # Bootstrap monorepo
-yarn
+npm install
 
 # ******************************************************************************
 # First, publish the monorepo.
@@ -97,7 +97,7 @@ npx create-react-app test-kitchensink --template=file:"$root_path"/packages/reac
 
 # Install the test module
 cd "$temp_module_path"
-yarn add test-integrity@^2.0.1
+npm install test-integrity@^2.0.1
 
 # ******************************************************************************
 # Now that we used create-react-app to create an app depending on react-scripts,
@@ -110,13 +110,10 @@ cd "$temp_app_path/test-kitchensink"
 # In kitchensink, we want to test all transforms
 export BROWSERSLIST='ie 9'
 
-# Link to test module
-npm link "$temp_module_path/node_modules/test-integrity"
-
 # Test the build
 REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   PUBLIC_URL=http://www.example.org/spa/ \
-  yarn build
+  npm run build
 
 # Check for expected output
 exists build/*.html
@@ -127,14 +124,14 @@ exists build/static/js/main.*.js
 REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   CI=true \
   NODE_ENV=test \
-  yarn test --no-cache --runInBand --testPathPattern=src
+  npm test --no-cache --runInBand --testPathPattern=src
 
 # Prepare "development" environment
 tmp_server_log=`mktemp`
 PORT=3001 \
   REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   NODE_PATH=src \
-  nohup yarn start &>$tmp_server_log &
+  nohup npm start &>$tmp_server_log &
 grep -q 'You can now view' <(tail -f $tmp_server_log)
 
 # Test "development" environment

tasks/e2e-kitchensink-eject.sh

@@ -82,7 +82,7 @@ then
 fi
 
 # Bootstrap monorepo
-yarn
+npm install
 
 # Start the local NPM registry
 startLocalRegistry "$root_path"/tasks/verdaccio.yaml
@@ -96,33 +96,25 @@ startLocalRegistry "$root_path"/tasks/verdaccio.yaml
 ./node_modules/.bin/eslint --max-warnings 0 packages/react-error-overlay/src/
 ./node_modules/.bin/eslint --max-warnings 0 packages/react-scripts/
 
-cd packages/react-error-overlay/
-yarn test
+npm test -w react-error-overlay
 if [ "$AGENT_OS" != 'Windows_NT' ]; then
   # Flow started hanging on Windows build agents
-  yarn flow
+  npm run flow -w react-error-overlay
 fi
-cd ../..
 
-cd packages/react-dev-utils/
-yarn test
-cd ../..
+npm test -w react-dev-utils
 
-cd packages/babel-plugin-named-asset-import/
-yarn test
-cd ../..
+npm test -w babel-plugin-named-asset-import
 
-cd packages/confusing-browser-globals/
-yarn test
-cd ../..
+npm test -w confusing-browser-globals
 
 # ******************************************************************************
 # First, test the create-react-app development environment.
 # This does not affect our users but makes sure we can develop it.
 # ******************************************************************************
 
 # Test local build command
-yarn build
+npm run build
 # Check for expected output
 exists build/*.html
 exists build/static/js/*.js
@@ -131,12 +123,12 @@ exists build/static/media/*.svg
 exists build/favicon.ico
 
 # Run tests with CI flag
-CI=true yarn test
+CI=true npm test
 # Uncomment when snapshot testing is enabled by default:
 # exists template/src/__snapshots__/App.test.js.snap
 
 # Test local start command
-yarn start --smoke-test
+npm start -- --smoke-test
 
 # Publish the monorepo
 publishToLocalRegistry
@@ -166,36 +158,36 @@ function verify_env_url {
   # Test relative path build
   awk -v n=2 -v s="  \"homepage\": \".\"," 'NR == n {print s} {print}' package.json > tmp && mv tmp package.json
 
-  yarn build
+  npm run build
   # Disabled until this can be tested
   # grep -F -R --exclude=*.map "../../static/" build/ -q; test $? -eq 0 || exit 1
   grep -F -R --exclude=*.map "\"./static/" build/ -q; test $? -eq 0 || exit 1
   grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1
 
-  PUBLIC_URL="/anabsolute" yarn build
+  PUBLIC_URL="/anabsolute" npm run build
   grep -F -R --exclude=*.map "/anabsolute/static/" build/ -q; test $? -eq 0 || exit 1
   grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1
 
   # Test absolute path build
   sed "2s/.*/  \"homepage\": \"\/testingpath\",/" package.json > tmp && mv tmp package.json
 
-  yarn build
+  npm run build
   grep -F -R --exclude=*.map "/testingpath/static/" build/ -q; test $? -eq 0 || exit 1
   grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1
 
-  PUBLIC_URL="https://www.example.net/overridetest" yarn build
+  PUBLIC_URL="https://www.example.net/overridetest" npm run build
   grep -F -R --exclude=*.map "https://www.example.net/overridetest/static/" build/ -q; test $? -eq 0 || exit 1
   grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1
   grep -F -R --exclude=*.map "testingpath/static" build/ -q; test $? -eq 1 || exit 1
 
   # Test absolute url build
   sed "2s/.*/  \"homepage\": \"https:\/\/www.example.net\/testingpath\",/" package.json > tmp && mv tmp package.json
 
-  yarn build
+  npm run build
   grep -F -R --exclude=*.map "/testingpath/static/" build/ -q; test $? -eq 0 || exit 1
   grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1
 
-  PUBLIC_URL="https://www.example.net/overridetest" yarn build
+  PUBLIC_URL="https://www.example.net/overridetest" npm run build
   grep -F -R --exclude=*.map "https://www.example.net/overridetest/static/" build/ -q; test $? -eq 0 || exit 1
   grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1
   grep -F -R --exclude=*.map "testingpath/static" build/ -q; test $? -eq 1 || exit 1
@@ -216,7 +208,7 @@ function verify_module_scope {
   echo "import sampleJson from '../sample'" | cat - src/App.js > src/App.js.temp && mv src/App.js.temp src/App.js
 
   # Make sure the build fails
-  yarn build; test $? -eq 1 || exit 1
+  npm run build; test $? -eq 1 || exit 1
   # TODO: check for error message
 
   rm sample.json
@@ -230,7 +222,7 @@ function verify_module_scope {
 cd test-app
 
 # Test the build
-yarn build
+npm run build
 # Check for expected output
 exists build/*.html
 exists build/static/js/*.js
@@ -239,12 +231,12 @@ exists build/static/media/*.svg
 exists build/favicon.ico
 
 # Run tests with CI flag
-CI=true yarn test
+CI=true npm test
 # Uncomment when snapshot testing is enabled by default:
 # exists src/__snapshots__/App.test.js.snap
 
 # Test the server
-yarn start --smoke-test
+npm start -- --smoke-test
 
 # Test environment handling
 verify_env_url
@@ -267,7 +259,7 @@ yarn add @babel/plugin-transform-react-jsx-source @babel/plugin-syntax-jsx @babe
 test -n "$(git diff --staged --name-only)"
 
 # Test the build
-yarn build
+npm run build
 # Check for expected output
 exists build/*.html
 exists build/static/js/*.js
@@ -276,15 +268,12 @@ exists build/static/media/*.svg
 exists build/favicon.ico
 
 # Run tests, overriding the watch option to disable it.
-# `CI=true yarn test` won't work here because `yarn 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).
-yarn test --watch=no
+npm test --watch=no
 # Uncomment when snapshot testing is enabled by default:
 # exists src/__snapshots__/App.test.js.snap
 
 # Test the server
-yarn start --smoke-test
+npm start -- --smoke-test
 
 # Test environment handling
 verify_env_url

tasks/e2e-kitchensink.sh

@@ -27,7 +27,7 @@ cd ..
 root_path=$PWD
 
 if [ -z $CI ]; then
-  yarn compile:lockfile
+  npm run compile:lockfile
 fi
 
 if [ -n "$(git status --porcelain)" ]; then
@@ -36,9 +36,7 @@ if [ -n "$(git status --porcelain)" ]; then
 fi
 
 # Compile
-cd packages/react-error-overlay/
-npm run build:prod
-cd ../..
+npm run build:prod -w react-error-overlay
 
 # Get 2FA when not CI
 otp=""

tasks/e2e-simple.sh

@@ -4,7 +4,7 @@
 
 These tests ensure various functionality contracts are upheld across dependency upgrades.
 
-To get started locally, run `cd packages/react-scripts/ && yarn link; cd ../../test/ && ../node_modules/.bin/jest --watchAll`.
+To get started locally, run `npx jest test/ --watchAll`.
 
 It's suggested that you filter down tests to avoid re-running everything. The most common tests will be the webpack messages.<br>
 To only run the webpack messages, type `p` followed by `webpack-message` and press `[enter]`.

tasks/publish.sh

@@ -4,40 +4,21 @@ const os = require('os');
 const stripAnsi = require('strip-ansi');
 const waitForLocalhost = require('wait-for-localhost');
 
-function stripYarn(output) {
-  let lines = output.split('\n');
-
-  let runIndex = lines.findIndex(line => line.match(/^yarn run/));
-  if (runIndex !== -1) {
-    lines.splice(0, runIndex + 2);
-    lines = lines.filter(line => !line.match(/^info Visit.*yarnpkg/));
-  }
-
-  return lines.join('\n');
-}
-
 function execaSafe(...args) {
   return execa(...args)
     .then(({ stdout, stderr, ...rest }) => ({
       fulfilled: true,
       rejected: false,
-      stdout: stripYarn(stripAnsi(stdout)),
-      stderr: stripYarn(stripAnsi(stderr)),
+      stdout: stripAnsi(stdout),
+      stderr: stripAnsi(stderr),
       ...rest,
     }))
     .catch(err => ({
       fulfilled: false,
       rejected: true,
       reason: err,
       stdout: '',
-      stderr: stripYarn(
-        stripAnsi(
-          err.message
-            .split('\n')
-            .slice(2)
-            .join('\n')
-        )
-      ),
+      stderr: stripAnsi(err.message.split('\n').slice(2).join('\n')),
     }));
 }
 
@@ -63,9 +44,9 @@ module.exports = class ReactScripts {
     };
 
     if (smoke) {
-      return await execaSafe('yarnpkg', ['start', '--smoke-test'], options);
+      return await execaSafe('npm', ['start', '--smoke-test'], options);
     }
-    const startProcess = execa('yarnpkg', ['start'], options);
+    const startProcess = execa('npm', ['start'], options);
     await waitForLocalhost({ port });
     return {
       port,
@@ -76,7 +57,7 @@ module.exports = class ReactScripts {
   }
 
   async build({ env = {} } = {}) {
-    return await execaSafe('yarnpkg', ['build'], {
+    return await execaSafe('npm', ['run', 'build'], {
       cwd: this.root,
       env: Object.assign({}, { CI: 'false', FORCE_COLOR: '0' }, env),
     });
@@ -85,8 +66,8 @@ module.exports = class ReactScripts {
   async serve() {
     const port = await getPort();
     const serveProcess = execa(
-      'yarnpkg',
-      ['serve', '--', '-p', port, '-s', 'build/'],
+      'npm',
+      ['run', 'serve', '--', '-p', port, '-s', 'build/'],
       {
         cwd: this.root,
       }
@@ -101,13 +82,9 @@ module.exports = class ReactScripts {
   }
 
   async test({ jestEnvironment = 'jsdom', env = {} } = {}) {
-    return await execaSafe(
-      'yarnpkg',
-      ['test', '--env', jestEnvironment, '--ci'],
-      {
-        cwd: this.root,
-        env: Object.assign({}, { CI: 'true' }, env),
-      }
-    );
+    return await execaSafe('npm', ['test', '--env', jestEnvironment, '--ci'], {
+      cwd: this.root,
+      env: Object.assign({}, { CI: 'true' }, env),
+    });
   }
 };

test/README.md

@@ -5,7 +5,7 @@ const tempy = require('tempy');
 const ReactScripts = require('./scripts');
 
 module.exports = class TestSetup {
-  constructor(fixtureName, templateDirectory, { pnp = true } = {}) {
+  constructor(fixtureName, templateDirectory) {
     this.fixtureName = fixtureName;
 
     this.templateDirectory = templateDirectory;
@@ -16,7 +16,6 @@ module.exports = class TestSetup {
     this.teardown = this.teardown.bind(this);
 
     this.isLocal = !(process.env.CI && process.env.CI !== 'false');
-    this.settings = { pnp: pnp && !this.isLocal };
   }
 
   async setup() {
@@ -28,7 +27,6 @@ module.exports = class TestSetup {
     );
     await fs.copy(this.templateDirectory, this.testDirectory);
     await fs.remove(path.resolve(this.testDirectory, 'test.partial.js'));
-    await fs.remove(path.resolve(this.testDirectory, '.disable-pnp'));
 
     const packageJson = await fs.readJson(
       path.resolve(this.testDirectory, 'package.json')
@@ -51,18 +49,9 @@ module.exports = class TestSetup {
       packageJson
     );
 
-    await execa(
-      'yarnpkg',
-      [
-        'install',
-        this.settings.pnp ? '--enable-pnp' : null,
-        '--mutex',
-        'network',
-      ].filter(Boolean),
-      {
-        cwd: this.testDirectory,
-      }
-    );
+    await execa('npm', ['install'], {
+      cwd: this.testDirectory,
+    });
 
     if (!shouldInstallScripts) {
       await fs.ensureSymlink(
@@ -78,7 +67,7 @@ module.exports = class TestSetup {
         ),
         path.join(this.testDirectory, 'node_modules', '.bin', 'react-scripts')
       );
-      await execa('yarnpkg', ['link', 'react-scripts'], {
+      await execa('npm', ['link', 'react-scripts'], {
         cwd: this.testDirectory,
       });
     }