feat: load .env files when using react-scripts (#310)

When using `react-scripts`, load `.env.test.local`, `.env.test` and `.env` files (and set `NODE_ENV=test`) and make `process.env` available

See `examples/react-scripts` for a full example

Author: bahmutov

README.md

@@ -172,7 +172,7 @@ We have several subfolders in [examples](examples) folder that have complete pro
 Folder Name | Description
 --- | ---
 [a11y](examples/a11y) | Testing components' accessibility using [cypress-axe](https://github.com/avanslaars/cypress-axe)
-[react-scripts](examples/react-scripts) | A project using `react-scripts` with component tests in `src` folder
+[react-scripts](examples/react-scripts) | A project using `react-scripts` with component tests in `src` folder, including the `.env` files demo.
 [react-scripts-folder](examples/react-scripts-folder) | A project using `react-scripts` with component tests in `cypress/component`
 [tailwind](examples/tailwind) | Testing styles built using [Tailwind CSS](https://tailwindcss.com/)
 [sass-and-ts](examples/sass-and-ts) | Example with Webpack, Sass and TypeScript

examples/react-scripts/.env

@@ -0,0 +1,9 @@
+SKIP_PREFLIGHT_CHECK=true
+# a few env variables to bundle into the app
+# https://create-react-app.dev/docs/adding-custom-environment-variables/
+REACT_APP_NOT_SECRET_CODE=Hello Component Tests!
+
+# env variables to check precedence
+# values from the left file should override values from the right file
+# .env.test.local, .env.test, .env
+REACT_APP_VAR=.env

examples/react-scripts/.env.test

@@ -0,0 +1,3 @@
+# test environment variables
+REACT_APP_VAR=.env.test
+REACT_APP_TEST_VAR=42

examples/react-scripts/.env.test.local

@@ -0,0 +1,6 @@
+# local test variables
+# usually not recommended to be committed, but for our modes
+# we will commit them
+
+# env variables to check precedence
+REACT_APP_VAR=.env.test.local

examples/react-scripts/README.md

@@ -14,3 +14,11 @@ npm test
 ![App test](images/app-test.png)
 
 The spec [src/Logo.cy-spec.js](src/Logo.cy-spec.js) directly imports SVG into React spec file. The spec [src/resources.cy-spec.js](src/resources.cy-spec.js) confirm that static resources like SVG and fonts load correctly.
+
+## Env files
+
+React Scripts automatically [loads `.env` files](https://create-react-app.dev/docs/adding-custom-environment-variables/). The `NODE_ENV` is set to `test` when loading scripts, thus the `.env.test` files are combined and the final `process.env` contains an object with string values.
+
+![Env test](images/env-test.png)
+
+See the test in [src/App.cy-spec.js](src/App.cy-spec.js) and local `.env` files in this folder.

examples/react-scripts/images/env-test.png

@@ -3,12 +3,25 @@
   "description": "Component testing with specs inside the src folder",
   "private": true,
   "scripts": {
+    "start": "../../node_modules/.bin/react-scripts start",
     "test": "../../node_modules/.bin/cypress run",
     "cy:open": "../../node_modules/.bin/cypress open",
     "check-coverage": "../../node_modules/.bin/check-coverage src/App.js src/calc.js src/Child.js cypress/fixtures/add.js",
     "only-covered": "../../node_modules/.bin/only-covered src/App.js src/calc.js src/Child.js cypress/fixtures/add.js"
   },
   "devDependencies": {
     "cypress-react-unit-test": "file:../.."
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

examples/react-scripts/package.json

@@ -32,4 +32,30 @@ describe('App', () => {
     mount(<App />)
     cy.contains('.mock-child', 'Mock Child')
   })
+
+  describe('loading .env variables', () => {
+    it('loads the REACT_APP_ variables from .env file', () => {
+      mount(<App />)
+      cy.contains('#env-var', 'Hello Component Tests!')
+    })
+
+    it('has NODE_ENV set to test', () => {
+      cy.wrap(process.env).should('have.property', 'NODE_ENV', 'test')
+    })
+
+    it('merges env variables from .env files', () => {
+      // test .env files take precedence over other files
+      // https://create-react-app.dev/docs/adding-custom-environment-variables/
+      cy.wrap(process.env).should('deep.include', {
+        NODE_ENV: 'test',
+        // from .env
+        REACT_APP_NOT_SECRET_CODE: 'Hello Component Tests!',
+        // from .env.test.local
+        REACT_APP_VAR: '.env.test.local',
+        // from .env.test file
+        // note that variables are NOT cast to numbers
+        REACT_APP_TEST_VAR: '42',
+      })
+    })
+  })
 })

examples/react-scripts/src/App.cy-spec.js

@@ -17,7 +17,7 @@ import Child from './Child'
 function App() {
   return (
     <div className="App">
-      <img src={cypressLogo} className="Cypress-log" />
+      <img src={cypressLogo} className="Cypress-log" alt="Logo" />
 
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
@@ -34,6 +34,10 @@ function App() {
         >
           Learn React
         </a>
+        <p>
+          <code>.env</code> variable is{' '}
+          <span id="env-var">{process.env.REACT_APP_NOT_SECRET_CODE}</span>
+        </p>
       </header>
     </div>
   )