Test environment variables

Author: Enoah Netzach

packages/react-scripts/templates/kitchensink/.env

@@ -1 +1 @@
-REACT_APP_ENV_FILE_MESSAGE=fromtheenvfile
+REACT_APP_FILE_ENV_MESSAGE=fromtheenvfile

packages/react-scripts/templates/kitchensink/integration/env.test.js

@@ -0,0 +1,26 @@
+import initDOM from './initDOM'
+
+// eslint-disable-next-line no-undef
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
+
+describe('Integration', () => {
+  describe('Environment variables', () => {
+    it('NODE_PATH', async () => {
+      const doc = await initDOM('node-path')
+
+      expect(doc.getElementById('feature-node-path').childElementCount).toBe(4)
+    })
+
+    it('shell env variables', async () => {
+      const doc = await initDOM('shell-env-variables')
+
+      expect(doc.getElementById('feature-shell-env-variables').textContent).toBe('fromtheshell.')
+    })
+
+    it('file env variables', async () => {
+      const doc = await initDOM('file-env-variables')
+
+      expect(doc.getElementById('feature-file-env-variables').textContent).toBe('fromtheenvfile.')
+    })
+  })
+})

packages/react-scripts/templates/kitchensink/integration/syntax.1.test.js

@@ -5,13 +5,13 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
 
 describe('Integration', () => {
   describe('Language syntax', () => {
-    it('array-destructuring', async () => {
+    it('array destructuring', async () => {
       const doc = await initDOM('array-destructuring')
 
       expect(doc.getElementById('feature-array-destructuring').childElementCount).toBe(4)
     })
 
-    it('array-spread', async () => {
+    it('array spread', async () => {
       const doc = await initDOM('array-spread')
 
       expect(doc.getElementById('feature-array-spread').childElementCount).toBe(4)
@@ -59,7 +59,7 @@ describe('Integration', () => {
       expect(doc.getElementById('feature-generators').childElementCount).toBe(4)
     })
 
-    it('object-destructuring', async () => {
+    it('object destructuring', async () => {
       const doc = await initDOM('object-destructuring')
 
       expect(doc.getElementById('feature-object-destructuring').childElementCount).toBe(4)

packages/react-scripts/templates/kitchensink/integration/syntax.2.test.js

@@ -5,7 +5,7 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
 
 describe('Integration', () => {
   describe('Language syntax', () => {
-    it('object-spread', async () => {
+    it('object spread', async () => {
       const doc = await initDOM('object-spread')
 
       expect(doc.getElementById('feature-object-spread').childElementCount).toBe(4)

packages/react-scripts/templates/kitchensink/src/App.js

@@ -49,11 +49,21 @@ class App extends React.Component {
           this.setState({ feature: require('./features/syntax/DestructuringAndAwait').default })
         );
         break;
+      case 'file-env-variables':
+        require.ensure(['./features/env/FileEnvVariables'], () =>
+          this.setState({ feature: require('./features/env/FileEnvVariables').default })
+        );
+        break;
       case 'generators':
         require.ensure(['./features/syntax/Generators'], () =>
           this.setState({ feature: require('./features/syntax/Generators').default })
         );
         break;
+      case 'node-path':
+        require.ensure(['./features/env/NodePath'], () =>
+          this.setState({ feature: require('./features/env/NodePath').default })
+        );
+        break;
       case 'object-destructuring':
         require.ensure(['./features/syntax/ObjectDestructuring'], () =>
           this.setState({ feature: require('./features/syntax/ObjectDestructuring').default })
@@ -79,6 +89,11 @@ class App extends React.Component {
           this.setState({ feature: require('./features/syntax/RestParameters').default })
         );
         break;
+      case 'shell-env-variables':
+        require.ensure(['./features/env/ShellEnvVariables'], () =>
+          this.setState({ feature: require('./features/env/ShellEnvVariables').default })
+        );
+        break;
       case 'template-interpolation':
         require.ensure(['./features/syntax/TemplateInterpolation'], () =>
           this.setState({ feature: require('./features/syntax/TemplateInterpolation').default })

packages/react-scripts/templates/kitchensink/src/CommentsList.js

@@ -0,0 +1,6 @@
+export default () => [
+  { id: 1, name: '1' },
+  { id: 2, name: '2' },
+  { id: 3, name: '3' },
+  { id: 4, name: '4' }
+]

packages/react-scripts/templates/kitchensink/src/EnvVariableMessages.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default () => (
+  <span id="feature-file-env-variables">{process.env.REACT_APP_FILE_ENV_MESSAGE}.</span>
+)

packages/react-scripts/templates/kitchensink/src/UsersList.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import FileEnvVariables from './FileEnvVariables';
+
+describe('.env variables', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<FileEnvVariables />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/absoluteLoad.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import load from 'absoluteLoad'
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { users: [] };
+  }
+
+  async componentDidMount() {
+    const users = load();
+    this.setState({ users });
+  }
+
+  render() {
+    return (
+      <div id="feature-node-path">
+        {this.state.users.map(user => (
+          <div key={user.id}>{user.name}</div>
+        ))}
+      </div>
+    );
+  }
+}

packages/react-scripts/templates/kitchensink/src/features/env/FileEnvVariables.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import NodePath from './NodePath';
+
+describe('NODE_PATH', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<NodePath />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/env/FileEnvVariables.test.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default () => (
+  <span id="feature-shell-env-variables">{process.env.REACT_APP_SHELL_ENV_MESSAGE}.</span>
+)

packages/react-scripts/templates/kitchensink/src/features/env/NodePath.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ShellEnvVariables from './ShellEnvVariables';
+
+describe('shell env variables', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<ShellEnvVariables />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/env/NodePath.test.js

@@ -149,7 +149,7 @@ create_react_app --scripts-version=$scripts_path --template=kitchensink test-app
 cd test-app
 
 # Test the build
-NODE_PATH=src npm run build
+NODE_PATH=src REACT_APP_SHELL_ENV_MESSAGE=fromtheshell npm run build
 # Check for expected output
 test -e build/*.html
 test -e build/static/js/main.*.js
@@ -158,14 +158,29 @@ test -e build/static/css/main.*.css
 # test -e build/favicon.ico # TODO uncomment this line
 
 # Unit tests
-CI=true NODE_PATH=src npm test -- --no-cache --testPathPattern="/src"
+REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
+  CI=true \
+  NODE_PATH=src \
+  npm test -- --no-cache --testPathPattern="/src/"
+
 # Test "development" environment
 tmp_server_log=`mktemp`
-PORT=3001 nohup npm start &>$tmp_server_log &
+PORT=3001 \
+  REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
+  NODE_PATH=src \
+  nohup npm start &>$tmp_server_log &
 grep -q 'The app is running at:' <(tail -f $tmp_server_log)
-E2E_URL="http://localhost:3001" CI=true NODE_PATH=src npm test -- --no-cache --testPathPattern="/integration/"
+E2E_URL="http://localhost:3001" \
+  REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
+  CI=true NODE_PATH=src \
+  npm test -- --no-cache --testPathPattern="/integration/"
+
 # Test "production" environment
-E2E_FILE=./build/index.html CI=true NODE_PATH=src npm test -- --no-cache --testPathPattern="/integration/"
+E2E_FILE=./build/index.html \
+  CI=true \
+  NODE_PATH=src \
+  npm test -- --no-cache --testPathPattern="/integration/"
+
 # Uncomment when snapshot testing is enabled by default:
 # test -e src/__snapshots__/App.test.js.snap
 
@@ -186,7 +201,7 @@ npm link $root_path/packages/react-dev-utils
 npm link $root_path/packages/react-scripts
 
 # Test the build
-NODE_PATH=src npm run build
+NODE_PATH=src REACT_APP_SHELL_ENV_MESSAGE=fromtheshell npm run build
 # Check for expected output
 test -e build/*.html
 test -e build/static/js/main.*.js
@@ -195,14 +210,29 @@ test -e build/static/css/main.*.css
 # test -e build/favicon.ico # TODO uncomment this line
 
 # Unit tests
-CI=true NODE_PATH=src npm test -- --no-cache --testPathPattern="/src"
+REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
+  CI=true \
+  NODE_PATH=src \
+  npm test -- --no-cache --testPathPattern="/src/"
+
 # Test "development" environment
 tmp_server_log=`mktemp`
-PORT=3002 nohup npm start &>$tmp_server_log &
+PORT=3002 \
+  REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
+  NODE_PATH=src \
+  nohup npm start &>$tmp_server_log &
 grep -q 'The app is running at:' <(tail -f $tmp_server_log)
-E2E_URL="http://localhost:3002" CI=true NODE_PATH=src npm test -- --no-cache --testPathPattern="/integration/"
+E2E_URL="http://localhost:3002" \
+  REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
+  CI=true NODE_PATH=src \
+  npm test -- --no-cache --testPathPattern="/integration/"
+
 # Test "production" environment
-E2E_FILE=./build/index.html CI=true NODE_PATH=src npm test -- --no-cache --testPathPattern="/integration/"
+E2E_FILE=./build/index.html \
+  CI=true \
+  NODE_PATH=src \
+  npm test -- --no-cache --testPathPattern="/integration/"
+
 # Uncomment when snapshot testing is enabled by default:
 # test -e src/__snapshots__/App.test.js.snap