Back to Repositories

Testing Environment Variable Configuration in Create React App

This integration test suite validates environment variable handling in Create React App applications, covering file-based, shell-based, and PUBLIC_URL configurations. The tests ensure proper variable expansion and environment-specific behavior across development and production builds.

Test Coverage Overview

The test suite provides comprehensive coverage of environment variable functionality in Create React App:

File-based environment variables with original and override values
PUBLIC_URL handling across development and production environments
Shell environment variable integration
Variable expansion and interpolation scenarios

Implementation Analysis

The testing approach utilizes Jest’s describe/it blocks for organized test grouping, with async/await patterns for DOM manipulation. The implementation leverages custom initDOM utility for consistent test environment setup, allowing isolated testing of environment variable injection and rendering.

Technical Details

Testing Framework: Jest
DOM Manipulation: Custom initDOM utility
Environment Handling: NODE_ENV configuration
Test Isolation: Document cleanup after each test
Assertion Methods: expect().toBe() for equality checks

Best Practices Demonstrated

The test suite exemplifies robust integration testing practices through proper test isolation, cleanup, and environment management. Each test case focuses on a specific environment variable scenario, with clear assertions and proper resource cleanup through afterEach hooks.

Proper test isolation and cleanup
Consistent environment variable testing patterns
Clear test case organization
Resource management best practices

facebook/create-react-app

packages/react-scripts/fixtures/kitchensink/template/integration/env.test.js

            
/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import initDOM from './initDOM';

describe('Integration', () => {
  describe('Environment variables', () => {
    let doc;

    afterEach(() => {
      doc && doc.defaultView.close();
      doc = undefined;
    });

    it('file env variables', async () => {
      doc = await initDOM('file-env-variables');

      expect(
        doc.getElementById('feature-file-env-original-1').textContent
      ).toBe('from-original-env-1');
      expect(
        doc.getElementById('feature-file-env-original-2').textContent
      ).toBe('override-from-original-local-env-2');

      expect(doc.getElementById('feature-file-env').textContent).toBe(
        process.env.NODE_ENV === 'production' ? 'production' : 'development'
      );
      expect(doc.getElementById('feature-file-env-x').textContent).toBe(
        'x-from-original-local-env'
      );
    });

    it('PUBLIC_URL', async () => {
      doc = await initDOM('public-url');

      const prefix =
        process.env.NODE_ENV === 'development'
          ? ''
          : 'http://www.example.org/spa';
      expect(doc.getElementById('feature-public-url').textContent).toBe(
        `${prefix}.`
      );
      expect(
        doc.querySelector('head link[rel="icon"]').getAttribute('href')
      ).toBe(`${prefix}/favicon.ico`);
    });

    it('shell env variables', async () => {
      doc = await initDOM('shell-env-variables');

      expect(
        doc.getElementById('feature-shell-env-variables').textContent
      ).toBe('fromtheshell.');
    });

    it('expand .env variables', async () => {
      doc = await initDOM('expand-env-variables');

      expect(doc.getElementById('feature-expand-env-1').textContent).toBe(
        'basic'
      );
      expect(doc.getElementById('feature-expand-env-2').textContent).toBe(
        'basic'
      );
      expect(doc.getElementById('feature-expand-env-3').textContent).toBe(
        'basic'
      );
      expect(
        doc.getElementById('feature-expand-env-existing').textContent
      ).toBe('fromtheshell');
    });
  });
});