RobDoan · March 19, 2023 03:27 · Oct 17, 2022 · Jun 6, 2022 · May 16, 2022 · Apr 10, 2021
diff --git a/new-cra-app.sh b/new-cra-app.sh
@@ -39,7 +39,7 @@ cat <<-EOF > cypress.config.js
 	  video: false,
 	});
 EOF
-echo "import '@testing-library/cypress/add-commands';" >> cypress/support/commands.js
+echo "\nimport '@testing-library/cypress/add-commands';" >> cypress/support/commands.js
 
 echo 'Creating basic E2E test'
 mkdir cypress/e2e/

diff --git a/cypress-cra.md b/cypress-cra.md
@@ -13,26 +13,31 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
 2. Open the Cypress UI to bootstrap the test setup:
 
     ```bash
-    $ ./node_modules/.bin/cypress open
+    $ npx cypress open --e2e
     ```
 
-    NPM installs the executables for all of your installed modules in the `.bin` directory, so you can use this for things you don't want to add to the package file.
-
-    You can quit the Cypress UI after you've had a look at the examples.
+    NPX will use the executable in the `node_modules/.bin/` directory, so you can use it for things you don't want to add to the package file.
 
 3. Delete the example files:
 
     ```bash
-    $ rm -rf ./cypress/fixtures/example.json ./cypress/integration/examples/
+    $ rm -rf ./cypress/fixtures/example.json
     ```
 
-4. Set a base URL in the `cypress.json` per the [best practices](https://docs.cypress.io/guides/references/best-practices.html#Setting-a-global-baseUrl) (I've also disabled automatic video recording):
+4. Set a base URL in the `cypress.config.js` per the [best practices](https://docs.cypress.io/guides/references/best-practices.html#Setting-a-global-baseUrl) (I've also disabled automatic video recording):
 
-    ```json
-    {
-      "baseUrl": "http://localhost:3000",
-      "video": false
-    }
+    ```js
+    const { defineConfig } = require("cypress");
+
+    module.exports = defineConfig({
+      e2e: {
+        baseUrl: "http://localhost:3000",
+        setupNodeEvents(on, config) {
+          // implement node event listeners here
+        },
+      },
+      video: false,
+    });
     ```
 
 5. Set up the Testing Library utilities by adding the following to `./cypress/support/commands.js`:
@@ -61,7 +66,7 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
     },
     ```
 
-8. Create a new test file e.g. `./cypress/integration/home.test.js` with the following:
+8. Create a new test file e.g. `./cypress/e2e/home.cy.js` with the following:
 
     ```javascript
     it("should load the page", () => {

diff --git a/new-cra-app.sh b/new-cra-app.sh
@@ -7,33 +7,43 @@ if [[ $# -ne 1 ]]; then
   exit 1
 fi
 
-echo 'Create default React app'
-npx create-react-app@latest --use-npm "$1"
+echo 'Creating default React app'
+npx create-react-app@latest "$1"
 
 cd "$1"
 
-echo 'Install Cypress dependencies'
+echo 'Installing Cypress dependencies'
 npm install \
   cypress \
   eslint-plugin-cypress \
   @testing-library/cypress
 
 echo 'Opening Cypress, please exit the UI once it has loaded'
-node_modules/.bin/cypress open
+npx cypress open --e2e
 
 echo 'Removing preinstalled examples'
 rm -rf \
-  cypress/fixtures/example.json \
-  cypress/integration/examples/
+  cypress/fixtures/example.json
 
 echo 'Updating Cypress configuration'
-echo '{"baseUrl": "http://localhost:3000", "video": false}' \
-  | jq \
-  | tee cypress.json
+cat <<-EOF > cypress.config.js
+	const { defineConfig } = require("cypress");
+	
+	module.exports = defineConfig({
+	  e2e: {
+	    baseUrl: "http://localhost:3000",
+	    setupNodeEvents(on, config) {
+	      // implement node event listeners here
+	    },
+	  },
+	  video: false,
+	});
+EOF
 echo "import '@testing-library/cypress/add-commands';" >> cypress/support/commands.js
 
 echo 'Creating basic E2E test'
-cat <<-EOF > cypress/integration/home.test.js
+mkdir cypress/e2e/
+cat <<-EOF > cypress/e2e/home.cy.js
 	it("should load the page", () => {
 	  cy.visit("/");
 	  cy.findAllByText(/learn react/i).should("have.length", 1);
@@ -49,12 +59,12 @@ cat <<-EOF >> .gitignore
 EOF
 
 echo 'Setting NPM package configuration'
+npm set-script e2e 'cypress run'
+npm set-script lint 'eslint cypress/ src/'
 cat package.json \
-  | jq '.scripts.e2e = "cypress run"' \
-  | jq '.scripts.lint = "eslint cypress/ src/"' \
   | jq '.eslintConfig.overrides = [{"extends": ["plugin:cypress/recommended"], "files": ["cypress/**/*.js"]}]' \
   | tee package.json
 
-echo 'Install and configure Cypress'
+echo 'Committing changes'
 git add .
 git commit -m 'Set up Cypress testing'
diff --git a/cypress-cra.md b/cypress-cra.md
@@ -31,7 +31,7 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
     ```json
     {
       "baseUrl": "http://localhost:3000",
-      "videos": false
+      "video": false
     }
     ```
 

diff --git a/cypress-cra.md b/cypress-cra.md
@@ -1,6 +1,6 @@
 Here is how to add Cypress E2E tests to a Create React App bootstrapped application. Assumes the \*nix command line, you may need to adapt this for a Windows command line (or use WSL or Git Bash).
 
- 1. Install [Cypress](https://www.cypress.io/) and the [Testing Library](https://testing-library.com/docs/cypress-testing-library/intro) utilities for it (to match the helpers CRA installs):
+1. Install [Cypress](https://www.cypress.io/) and the [Testing Library](https://testing-library.com/docs/cypress-testing-library/intro) utilities for it (to match the helpers CRA installs):
 
     ```bash
     $ npm i {,@testing-library/}cypress
@@ -10,7 +10,7 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
 
     CRA seems to install everything as a production dependency, but you can add `--save-dev` if you like.
 
- 2. Open the Cypress UI to bootstrap the test setup:
+2. Open the Cypress UI to bootstrap the test setup:
 
     ```bash
     $ ./node_modules/.bin/cypress open
@@ -20,13 +20,13 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
 
     You can quit the Cypress UI after you've had a look at the examples.
 
- 3. Delete the example files:
+3. Delete the example files:
 
     ```bash
     $ rm -rf ./cypress/fixtures/example.json ./cypress/integration/examples/
     ```
 
- 4. Set a base URL in the `cypress.json` per the [best practices](https://docs.cypress.io/guides/references/best-practices.html#Setting-a-global-baseUrl) (I've also disabled automatic video recording):
+4. Set a base URL in the `cypress.json` per the [best practices](https://docs.cypress.io/guides/references/best-practices.html#Setting-a-global-baseUrl) (I've also disabled automatic video recording):
 
     ```json
     {
@@ -35,21 +35,21 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
     }
     ```
 
- 5. Set up the Testing Library utilities by adding the following to `./cypress/support/commands.js`:
+5. Set up the Testing Library utilities by adding the following to `./cypress/support/commands.js`:
 
     ```javascript
     import "@testing-library/cypress/add-commands";
     ```
 
- 6. Make sure you exclude any videos and screenshots recorded by Cypress from your commits by adding the following to `.gitignore`:
+6. Make sure you exclude any videos and screenshots recorded by Cypress from your commits by adding the following to `.gitignore`:
 
     ```ignore
     # Cypress
     cypress/screenshots/
     cypress/videos/
     ```
 
- 7. Add a script that runs the E2E tests into the package file:
+7. Add a script that runs the E2E tests into the package file:
 
     ```json
     "scripts": 
@@ -61,7 +61,7 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
     },
     ```
 
- 8. Create a new test file e.g. `./cypress/integration/home.test.js` with the following:
+8. Create a new test file e.g. `./cypress/integration/home.test.js` with the following:
 
     ```javascript
     it("should load the page", () => {
@@ -72,9 +72,9 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
 
     This is the same as the default `src/App.test.js`, but running via Cypress rather than Jest.
 
- 9. Start the app in one terminal (`npm start`) then run the tests in another (`npm run e2e`). It should pass!
+9. Start the app in one terminal (`npm start`) then run the tests in another (`npm run e2e`). It should pass!
 
- 10. _[Optional]_ Install the ESLint plugin with `npm install eslint-plugin-cypress` then add the following to the `eslintConfig` object in `package.json`:
+10. Install the ESLint plugin with `npm install eslint-plugin-cypress` then add the following to the `eslintConfig` object in `package.json`:
 
     ```json
       "overrides": [
@@ -89,4 +89,4 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
       ]
     ```
 
-    This will ensure the linting passes, by adding the Cypress globals, and give some useful hints on good test practices.
+    This is optional, but will ensure the linting passes (by adding the Cypress globals) and give some useful hints on good test practices.
diff --git a/cypress-cra.md b/cypress-cra.md
@@ -77,16 +77,16 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
  10. _[Optional]_ Install the ESLint plugin with `npm install eslint-plugin-cypress` then add the following to the `eslintConfig` object in `package.json`:
 
     ```json
-    "overrides": [
-      { 
-        "extends": [
-          "plugin:cypress/recommended"
-        ],
-        "files": [
-          "cypress/**/*.js"
-        ]
-      }
-    ]
+      "overrides": [
+        { 
+          "extends": [
+            "plugin:cypress/recommended"
+          ],
+          "files": [
+            "cypress/**/*.js"
+          ]
+        }
+      ]
     ```
-    
+
     This will ensure the linting passes, by adding the Cypress globals, and give some useful hints on good test practices.
diff --git a/cypress-cra.md b/cypress-cra.md
@@ -87,4 +87,6 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
         ]
       }
     ]
-    ```
+    ```
+    
+    This will ensure the linting passes, by adding the Cypress globals, and give some useful hints on good test practices.
diff --git a/cypress-cra.md b/cypress-cra.md
@@ -72,4 +72,19 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
 
     This is the same as the default `src/App.test.js`, but running via Cypress rather than Jest.
 
- 9. Start the app in one terminal (`npm start`) then run the tests in another (`npm run e2e`). It should pass!
+ 9. Start the app in one terminal (`npm start`) then run the tests in another (`npm run e2e`). It should pass!
+
+ 10. _[Optional]_ Install the ESLint plugin with `npm install eslint-plugin-cypress` then add the following to the `eslintConfig` object in `package.json`:
+
+    ```json
+    "overrides": [
+      { 
+        "extends": [
+          "plugin:cypress/recommended"
+        ],
+        "files": [
+          "cypress/**/*.js"
+        ]
+      }
+    ]
+    ```
diff --git a/cypress-cra.md b/cypress-cra.md
@@ -26,23 +26,30 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
     $ rm -rf ./cypress/fixtures/example.json ./cypress/integration/examples/
     ```
 
- 4. Set a base URL in the `cypress.json` per the [best practices](https://docs.cypress.io/guides/references/best-practices.html#Setting-a-global-baseUrl):
+ 4. Set a base URL in the `cypress.json` per the [best practices](https://docs.cypress.io/guides/references/best-practices.html#Setting-a-global-baseUrl) (I've also disabled automatic video recording):
 
     ```json
     {
-      "baseUrl": "http://localhost:3000"
+      "baseUrl": "http://localhost:3000",
+      "videos": false
     }
     ```
 
- 5. Make sure you exclude any videos and screenshots recorded by Cypress from your commits by adding the following to `.gitignore`:
+ 5. Set up the Testing Library utilities by adding the following to `./cypress/support/commands.js`:
+
+    ```javascript
+    import "@testing-library/cypress/add-commands";
+    ```
+
+ 6. Make sure you exclude any videos and screenshots recorded by Cypress from your commits by adding the following to `.gitignore`:
 
     ```ignore
     # Cypress
     cypress/screenshots/
     cypress/videos/
     ```
 
- 6. Add a script that runs the E2E tests into the package file:
+ 7. Add a script that runs the E2E tests into the package file:
 
     ```json
     "scripts": 
@@ -54,7 +61,7 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
     },
     ```
 
- 7. Create a new test file e.g. `./cypress/integration/home.test.js` with the following:
+ 8. Create a new test file e.g. `./cypress/integration/home.test.js` with the following:
 
     ```javascript
     it("should load the page", () => {
@@ -65,4 +72,4 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
 
     This is the same as the default `src/App.test.js`, but running via Cypress rather than Jest.
 
- 8. Start the app in one terminal (`npm start`) then run the tests in another (`npm run e2e`). It should pass!
+ 9. Start the app in one terminal (`npm start`) then run the tests in another (`npm run e2e`). It should pass!
diff --git a/new-cra-app.sh b/new-cra-app.sh
@@ -34,17 +34,18 @@ echo "import '@testing-library/cypress/add-commands';" >> cypress/support/comman
 
 echo 'Creating basic E2E test'
 cat <<-EOF > cypress/integration/home.test.js
-  it("should load the page", () => {
-    cy.visit("/");
-    cy.findAllByText(/learn react/i).should("have.length", 1);
-  });
+	it("should load the page", () => {
+	  cy.visit("/");
+	  cy.findAllByText(/learn react/i).should("have.length", 1);
+	});
 EOF
 
 echo 'Ignoring Cypress test assets'
 cat <<-EOF >> .gitignore
-  # cypress
-  cypress/screenshots/
-  cypress/videos/
+	
+	# cypress
+	cypress/screenshots/
+	cypress/videos/
 EOF
 
 echo 'Setting NPM package configuration'
@@ -54,10 +55,6 @@ cat package.json \
   | jq '.eslintConfig.overrides = [{"extends": ["plugin:cypress/recommended"], "files": ["cypress/**/*.js"]}]' \
   | tee package.json
 
-
-echo 'Fix code style'
-npm run lint -- --fix
-
 echo 'Install and configure Cypress'
 git add .
 git commit -m 'Set up Cypress testing'
diff --git a/new-cra-app.sh b/new-cra-app.sh
@@ -0,0 +1,63 @@
+#!/bin/bash
+
+set -euo pipefail
+
+if [[ $# -ne 1 ]]; then
+  echo 'Usage: new-cra-app.sh <app-name>'
+  exit 1
+fi
+
+echo 'Create default React app'
+npx create-react-app@latest --use-npm "$1"
+
+cd "$1"
+
+echo 'Install Cypress dependencies'
+npm install \
+  cypress \
+  eslint-plugin-cypress \
+  @testing-library/cypress
+
+echo 'Opening Cypress, please exit the UI once it has loaded'
+node_modules/.bin/cypress open
+
+echo 'Removing preinstalled examples'
+rm -rf \
+  cypress/fixtures/example.json \
+  cypress/integration/examples/
+
+echo 'Updating Cypress configuration'
+echo '{"baseUrl": "http://localhost:3000", "video": false}' \
+  | jq \
+  | tee cypress.json
+echo "import '@testing-library/cypress/add-commands';" >> cypress/support/commands.js
+
+echo 'Creating basic E2E test'
+cat <<-EOF > cypress/integration/home.test.js
+  it("should load the page", () => {
+    cy.visit("/");
+    cy.findAllByText(/learn react/i).should("have.length", 1);
+  });
+EOF
+
+echo 'Ignoring Cypress test assets'
+cat <<-EOF >> .gitignore
+  # cypress
+  cypress/screenshots/
+  cypress/videos/
+EOF
+
+echo 'Setting NPM package configuration'
+cat package.json \
+  | jq '.scripts.e2e = "cypress run"' \
+  | jq '.scripts.lint = "eslint cypress/ src/"' \
+  | jq '.eslintConfig.overrides = [{"extends": ["plugin:cypress/recommended"], "files": ["cypress/**/*.js"]}]' \
+  | tee package.json
+
+
+echo 'Fix code style'
+npm run lint -- --fix
+
+echo 'Install and configure Cypress'
+git add .
+git commit -m 'Set up Cypress testing'
diff --git a/cypress-cra.md b/cypress-cra.md
@@ -6,7 +6,7 @@ Here is how to add Cypress E2E tests to a Create React App bootstrapped applicat
     $ npm i {,@testing-library/}cypress
     ```
 
-    `i` is short for install, and the braces `{}` are expanded
+    `i` is short for install, and the braces `{}` are expanded by [brace expansion](https://www.gnu.org/software/bash/manual/html_node/Brace-Expansion.html) to `cypress @testing-library/cypress`.
 
     CRA seems to install everything as a production dependency, but you can add `--save-dev` if you like.
 

diff --git a/cypress-cra.md b/cypress-cra.md
@@ -1,8 +1,12 @@
+Here is how to add Cypress E2E tests to a Create React App bootstrapped application. Assumes the \*nix command line, you may need to adapt this for a Windows command line (or use WSL or Git Bash).
+
  1. Install [Cypress](https://www.cypress.io/) and the [Testing Library](https://testing-library.com/docs/cypress-testing-library/intro) utilities for it (to match the helpers CRA installs):
 
     ```bash
-    $ npm install cypress @testing-library/cypress
+    $ npm i {,@testing-library/}cypress
     ```
+
+    `i` is short for install, and the braces `{}` are expanded
 
     CRA seems to install everything as a production dependency, but you can add `--save-dev` if you like.
 
@@ -30,15 +34,15 @@
     }
     ```
 
-- Make sure you exclude any videos and screenshots recorded by Cypress from your commits by adding the following to `.gitignore`:
+ 5. Make sure you exclude any videos and screenshots recorded by Cypress from your commits by adding the following to `.gitignore`:
 
     ```ignore
     # Cypress
     cypress/screenshots/
     cypress/videos/
     ```
 
-- Add a script that runs the E2E tests into the package file:
+ 6. Add a script that runs the E2E tests into the package file:
 
     ```json
     "scripts": 
@@ -50,7 +54,7 @@
     },
     ```
 
-- Create a new test file e.g. `./cypress/integration/home.test.js` with the following:
+ 7. Create a new test file e.g. `./cypress/integration/home.test.js` with the following:
 
     ```javascript
     it("should load the page", () => {
@@ -61,4 +65,4 @@
 
     This is the same as the default `src/App.test.js`, but running via Cypress rather than Jest.
 
-- Start the app in one terminal (`npm start`) then run the tests in another (`npm run e2e`). It should pass!
+ 8. Start the app in one terminal (`npm start`) then run the tests in another (`npm run e2e`). It should pass!
diff --git a/cypress-cra.md b/cypress-cra.md
@@ -0,0 +1,64 @@
+ 1. Install [Cypress](https://www.cypress.io/) and the [Testing Library](https://testing-library.com/docs/cypress-testing-library/intro) utilities for it (to match the helpers CRA installs):
+
+    ```bash
+    $ npm install cypress @testing-library/cypress
+    ```
+
+    CRA seems to install everything as a production dependency, but you can add `--save-dev` if you like.
+
+ 2. Open the Cypress UI to bootstrap the test setup:
+
+    ```bash
+    $ ./node_modules/.bin/cypress open
+    ```
+
+    NPM installs the executables for all of your installed modules in the `.bin` directory, so you can use this for things you don't want to add to the package file.
+
+    You can quit the Cypress UI after you've had a look at the examples.
+
+ 3. Delete the example files:
+
+    ```bash
+    $ rm -rf ./cypress/fixtures/example.json ./cypress/integration/examples/
+    ```
+
+ 4. Set a base URL in the `cypress.json` per the [best practices](https://docs.cypress.io/guides/references/best-practices.html#Setting-a-global-baseUrl):
+
+    ```json
+    {
+      "baseUrl": "http://localhost:3000"
+    }
+    ```
+
+- Make sure you exclude any videos and screenshots recorded by Cypress from your commits by adding the following to `.gitignore`:
+
+    ```ignore
+    # Cypress
+    cypress/screenshots/
+    cypress/videos/
+    ```
+
+- Add a script that runs the E2E tests into the package file:
+
+    ```json
+    "scripts": 
+      "e2e": "cypress run",
+      "start": "react-scripts start",
+      "build": "react-scripts build",
+      "test": "react-scripts test",
+      "eject": "react-scripts eject"
+    },
+    ```
+
+- Create a new test file e.g. `./cypress/integration/home.test.js` with the following:
+
+    ```javascript
+    it("should load the page", () => {
+      cy.visit("/");
+      cy.findAllByText(/learn react/i).should("have.length", 1);
+    });
+    ```
+
+    This is the same as the default `src/App.test.js`, but running via Cypress rather than Jest.
+
+- Start the app in one terminal (`npm start`) then run the tests in another (`npm run e2e`). It should pass!