[WP5] Webpack5 update

.eslintrc.json

@@ -4,7 +4,8 @@
     "browser": true,
     "commonjs": true,
     "node": true,
-    "es6": true
+    "es6": true,
+    "jest": true
   },
   "parserOptions": {
     "ecmaVersion": 2018

.github/workflows/integration.yml

@@ -0,0 +1,36 @@
+name: Integration Tests
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  job:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: ['ubuntu-latest', 'macos-latest', 'windows-latest']
+        node: ['10', '12', '14']
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v1
+        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') }}
+      - name: Install packages
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile --prefer-offline
+      - name: Run integration tests
+        run: yarn test:integration

docusaurus/docs/using-the-public-folder.md

@@ -60,7 +60,7 @@ The `public` folder is useful as a workaround for a number of less common cases:
 
 - You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest).
 - You have thousands of images and need to dynamically reference their paths.
-- You want to include a small script like [`pace.js`](https://github.hubspot.com/pace/docs/welcome/) outside of the bundled code.
+- You want to include a small script like [`pace.js`](https://github.com/CodeByZach/pace) outside of the bundled code.
 - Some libraries may be incompatible with webpack and you have no other option but to include it as a `<script>` tag.
 
 Note that if you add a `<script>` that declares global variables, you should read the topic [Using Global Variables](using-global-variables.md) in the next section which explains how to reference them.

package.json

@@ -15,6 +15,7 @@
     "screencast": "node ./tasks/screencast.js",
     "screencast:error": "svg-term --cast jyu19xGl88FQ3poMY8Hbmfw8y --out screencast-error.svg --window --at 12000 --no-cursor",
     "alex": "alex .",
+    "test:integration": "jest test/integration",
     "test": "cd packages/react-scripts && node bin/react-scripts.js test",
     "format": "prettier --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'",
     "compile:lockfile": "node tasks/compile-lockfile.js"

packages/eslint-config-react-app/README.md

@@ -39,7 +39,7 @@ This config also ships with optional Jest rules for ESLint (based on [`eslint-pl
 You'll first need to add the ESLint plugin for Jest (if you don't already have it installed).
 
 ```sh
-npm install --save-dev eslint-plugin-jest@^24.0.0 eslint-plugin-testing-library&^3.9.0
+npm install --save-dev eslint-plugin-jest@^24.0.0 eslint-plugin-testing-library@^3.9.0
 ```
 
 You can then enable these rules by adding the Jest config to the `extends` array in your ESLint config.

packages/react-dev-utils/package.json

@@ -65,7 +65,7 @@
     "global-modules": "2.0.0",
     "globby": "11.0.1",
     "gzip-size": "5.1.1",
-    "immer": "8.0.1",
+    "immer": "8.0.4",
     "is-root": "2.1.0",
     "loader-utils": "2.0.0",
     "open": "^7.0.2",

test/integration/create-react-app/index.test.js

@@ -0,0 +1,90 @@
+'use strict';
+
+const execa = require('execa');
+const { mkdirp, remove, writeFileSync } = require('fs-extra');
+const { join } = require('path');
+
+const cli = require.resolve('create-react-app/index.js');
+
+jest.setTimeout(1000 * 60 * 5);
+
+const projectName = 'test-app';
+const genPath = join(__dirname, projectName);
+
+const generatedFiles = ['.gitignore', 'package.json', 'src', 'yarn.lock'];
+
+beforeEach(() => remove(genPath));
+afterAll(() => remove(genPath));
+
+const run = (args, options) => execa('node', [cli].concat(args), options);
+
+describe('create-react-app', () => {
+  it('asks to supply an argument if none supplied', async () => {
+    const { stderr } = await run([], { reject: false });
+    expect(stderr).toContain('Please specify the project directory');
+  });
+
+  it('creates a project on supplying a name as the argument', async () => {
+    await run([projectName], { cwd: __dirname });
+
+    // Assert for the generated files
+    generatedFiles.forEach(file => expect(join(genPath, file)).toBeTruthy());
+  });
+
+  it('warns about conflicting files in path', async () => {
+    // Create the temporary directory
+    await mkdirp(genPath);
+
+    // Create a package.json file
+    const pkgJson = join(genPath, 'package.json');
+    writeFileSync(pkgJson, '{ "foo": "bar" }');
+
+    const { stdout } = await run([projectName], {
+      cwd: __dirname,
+      reject: false,
+    });
+
+    // Assert for the expected message
+    expect(stdout).toContain(
+      `The directory ${projectName} contains files that could conflict`
+    );
+  });
+
+  it('creates a project in the current directory', async () => {
+    // Create temporary directory
+    await mkdirp(genPath);
+
+    // Create a project in the current directory
+    await run(['.'], { cwd: genPath });
+
+    // Assert for the generated files
+    generatedFiles.forEach(file => expect(join(genPath, file)).toBeTruthy());
+  });
+
+  it('uses npm as the package manager', async () => {
+    await run([projectName, '--use-npm'], {
+      cwd: __dirname,
+    });
+
+    // Assert for the generated files
+    const generatedFilesWithNpm = [
+      ...generatedFiles.filter(file => file !== 'yarn.lock'),
+      'package-lock.json',
+    ];
+
+    generatedFilesWithNpm.forEach(file =>
+      expect(join(genPath, file)).toBeTruthy()
+    );
+  });
+
+  it('creates a project based on the typescript template', async () => {
+    await run([projectName, '--template', 'typescript'], {
+      cwd: __dirname,
+    });
+
+    // Assert for the generated files
+    [...generatedFiles, 'tsconfig.json'].forEach(file =>
+      expect(join(genPath, file)).toBeTruthy()
+    );
+  });
+});