Back to Repositories

Testing Configuration Path Resolution in Create React App

This integration test suite validates the configuration handling in Create React App, specifically focusing on baseUrl settings in jsconfig.json and tsconfig.json files. The tests ensure proper module resolution and path mapping functionality within the React application structure.

Test Coverage Overview

The test coverage focuses on configuration file handling and module resolution capabilities in Create React App.

Validates baseUrl configuration setting to ‘src’ directory
Tests module import resolution using configured paths
Verifies DOM element creation and structure
Ensures proper cleanup of test environment

Implementation Analysis

The testing approach utilizes Jest’s describe/it blocks for organizing test cases, with async/await patterns for DOM manipulation. The implementation leverages custom DOM initialization utilities through the initDOM helper, ensuring isolated test environments.

Async test execution for DOM operations
Modular test structure with describe blocks
Cleanup routines using afterEach hooks

Technical Details

Testing Framework: Jest
DOM Manipulation: Custom initDOM utility
Configuration Files: jsconfig.json/tsconfig.json
Test Environment: Node.js with JSDOM
Assertion Methods: expect().toBe()

Best Practices Demonstrated

The test suite exemplifies clean testing practices with proper test isolation and resource cleanup. It demonstrates effective use of async/await patterns and modular test organization.

Proper test cleanup and resource management
Clear test case isolation
Consistent assertion patterns
Modular test structure

facebook/create-react-app

packages/react-scripts/fixtures/kitchensink/template/integration/config.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('jsconfig.json/tsconfig.json', () => {
    let doc;

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

    it('Supports setting baseUrl to src', async () => {
      doc = await initDOM('base-url');

      expect(doc.getElementById('feature-base-url').childElementCount).toBe(4);
    });
  });
});