Fix e2e docker tests fails on lerna publish and other test fixes

.devcontainer/Dockerfile

@@ -0,0 +1,29 @@
+ARG VARIANT="12"
+FROM node:${VARIANT}
+# FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+RUN apt-get update \
+    && apt-get install -y wget gnupg \
+    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
+    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+    && apt-get update \
+    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 libxtst6 \
+      --no-install-recommends \
+    && rm -rf /var/lib/apt/lists/*
+# Ref: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-in-docker
+
+# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
+    PUPPETEER_EXECUTABLE_PATH=/usr/bin/google-chrome-stable
+
+USER node
+WORKDIR /home/node
+
+ENV NPM_CONFIG_PREFIX=/home/node/.npm
+ENV NPM_CONFIG_QUIET=true
+RUN echo "prefix=~/.npm" > ~/.npmrc
+
+RUN git config --global core.autocrlf false
+
+RUN node --version
+RUN npm --version

.devcontainer/devcontainer.json

@@ -0,0 +1,14 @@
+{
+  "name": "Create React App Development",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "args": { "VARIANT": "12" }
+  },
+  "settings": {
+    "terminal.integrated.shell.linux": "/bin/bash"
+  },
+  "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"],
+  "forwardPorts": [],
+  "postCreateCommand": "yarn install",
+  "remoteUser": "node"
+}

.dockerignore

@@ -0,0 +1,17 @@
+.idea
+.vscode
+node_modules
+build
+lib
+storage
+.DS_Store
+*.tgz
+my-app*
+__snapshots__
+lerna-debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.changelog
+.npm
+yarn.lock

.eslintignore

@@ -4,3 +4,4 @@ my-app*
 packages/react-scripts/template
 packages/react-scripts/fixtures
 fixtures/
+default/

tasks/local-registry.sh

@@ -6,6 +6,8 @@ original_yarn_registry_url=`yarn config get registry`
 default_verdaccio_package=verdaccio@^4.5.1
 
 function startLocalRegistry {
+  clearLocalPackagesFromLocalRegistryStorage
+
   # Start local registry
   tmp_registry_log=`mktemp`
   echo "Registry output file: $tmp_registry_log"
@@ -28,3 +30,9 @@ function publishToLocalRegistry {
   git clean -df
   ./tasks/publish.sh prerelease --yes --force-publish=* --no-git-tag-version --no-commit-hooks --no-push --exact --dist-tag=latest
 }
+
+function clearLocalPackagesFromLocalRegistryStorage {
+  for f in ./packages/*; do
+    [ -d $f ] && [[ "$f" =~ ^\./packages/(.*) ]] && rm -rf ./tasks/storage/${BASH_REMATCH[1]};
+  done;
+}

tasks/local-test.sh

@@ -91,9 +91,6 @@ if [ ${git_branch} != ${current_git_branch} ]; then
 fi
 
 read -r -d '' command <<- CMD
-echo "prefix=~/.npm" > ~/.npmrc
-mkdir ~/.npm
-export PATH=\$PATH:~/.npm/bin
 set -x
 git clone /var/create-react-app create-react-app --branch ${git_branch}
 cd create-react-app
@@ -112,15 +109,25 @@ $([[ ${interactive} == 'true' ]] && echo 'bash')
 exit \$result_code
 CMD
 
+if $(git diff-index --quiet HEAD --); then
+  echo "Git working tree clean, ready to begin testing"
+else
+  echo "Cannot run tests with untracked changes, please commit and try again"
+  exit 1
+fi
+
+echo "Building local test image based on node:${node_version}"
+docker build -t create-react-app-local-test -f ../.devcontainer/Dockerfile --build-arg VARIANT=${node_version} .
+
+echo "Current folder: ${PWD}"
+
 docker run \
   --env CI=true \
-  --env NPM_CONFIG_PREFIX=/home/node/.npm \
-  --env NPM_CONFIG_QUIET=true \
   --tty \
   --rm \
   --user node \
   --volume ${PWD}/..:/var/create-react-app \
   --workdir /home/node \
   $([[ ${interactive} == 'true' ]] && echo '--interactive') \
-  node:${node_version} \
+  create-react-app-local-test \
   bash -c "${command}"

test/default/puppeteer.test.js

@@ -0,0 +1,28 @@
+const puppeteer = require('puppeteer');
+
+describe('verify puppeteer config', () => {
+  let browser = null;
+
+  afterEach(() => {
+    if (browser != null) {
+      browser.close();
+      browser = null;
+    }
+  });
+
+  it('should start up', async () => {
+    browser = await puppeteer.launch({
+      headless: true,
+      args: ['--no-sandbox'],
+    });
+    const page = await browser.newPage();
+    page.setContent(`
+      <html>
+        <body class="hello">Hello</body>
+      </html>
+    `);
+    const element = await page.waitForSelector('.hello', { timeout: 0 });
+    const text = await page.evaluate(el => el.innerText, element);
+    expect(text).toBe('Hello');
+  });
+});

test/fixtures/mjs-support/index.test.js

@@ -5,7 +5,10 @@ const puppeteer = require('puppeteer');
 test('can use mjs library in development', async () => {
   const { port, done } = await testSetup.scripts.start();
 
-  const browser = await puppeteer.launch({ headless: true });
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ['--no-sandbox'],
+  });
   try {
     const page = await browser.newPage();
     await page.goto(`http://localhost:${port}/`);
@@ -24,7 +27,10 @@ test('can use mjs library in production', async () => {
   await testSetup.scripts.build();
   const { port, done } = await testSetup.scripts.serve();
 
-  const browser = await puppeteer.launch({ headless: true });
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ['--no-sandbox'],
+  });
   try {
     const page = await browser.newPage();
     await page.goto(`http://localhost:${port}/`);

test/fixtures/typescript-typecheck/index.test.js

@@ -6,7 +6,10 @@ const expectedErrorMsg = `Argument of type '123' is not assignable to parameter
 test('shows error overlay in browser', async () => {
   const { port, done } = await testSetup.scripts.start();
 
-  const browser = await puppeteer.launch({ headless: true });
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ['--no-sandbox'],
+  });
   try {
     const page = await browser.newPage();
     await page.goto(`http://localhost:${port}/`);