Back to Repositories

Testing Public URL Path Resolution Implementation in Create React App

This comprehensive test suite validates the getPublicUrlOrPath utility function in Create React App, which handles URL path resolution for both development and production environments. The tests ensure proper handling of homepage and publicUrl configurations across different scenarios.

Test Coverage Overview

The test suite provides extensive coverage of URL path resolution scenarios, testing both development and production environments.

Tests homepage configuration with various path formats (relative, absolute, URL)
Validates publicUrl handling in isolation
Verifies combined behavior of homepage and publicUrl settings
Covers edge cases including relative paths (./, ../)

Implementation Analysis

The testing approach utilizes Jest’s parametrized testing pattern, implementing a data-driven methodology through an array of test cases. Each test case defines input parameters (dev, homepage, publicUrl) and expected outputs, allowing for systematic verification of all possible combinations.

Uses Jest’s describe/it block structure
Implements dynamic test generation through array iteration
Employs JSON.stringify for clear test case identification

Technical Details

Testing Framework: Jest
Test Type: Unit tests
Key Dependencies: react-dev-utils
Testing Pattern: Data-driven testing
Environment Variables: dev flag for environment switching

Best Practices Demonstrated

The test suite exemplifies several testing best practices in modern JavaScript development.

Comprehensive test case coverage through parametrization
Clear separation of test data from test logic
Consistent test case structure and naming
Efficient test organization using describe blocks
Proper handling of environment-specific scenarios

facebook/create-react-app

packages/react-dev-utils/__tests__/getPublicUrlOrPath.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.
 */

'use strict';

const getPublicUrlOrPath = require('../getPublicUrlOrPath');

const tests = [
  // DEVELOPMENT with homepage
  { dev: true, homepage: '/', expect: '/' },
  { dev: true, homepage: '/test', expect: '/test/' },
  { dev: true, homepage: '/test/', expect: '/test/' },
  { dev: true, homepage: './', expect: '/' },
  { dev: true, homepage: '../', expect: '/' },
  { dev: true, homepage: '../test', expect: '/' },
  { dev: true, homepage: './test/path', expect: '/' },
  { dev: true, homepage: 'https://create-react-app.dev/', expect: '/' },
  {
    dev: true,
    homepage: 'https://create-react-app.dev/test',
    expect: '/test/',
  },
  // DEVELOPMENT with publicURL
  { dev: true, publicUrl: '/', expect: '/' },
  { dev: true, publicUrl: '/test', expect: '/test/' },
  { dev: true, publicUrl: '/test/', expect: '/test/' },
  { dev: true, publicUrl: './', expect: '/' },
  { dev: true, publicUrl: '../', expect: '/' },
  { dev: true, publicUrl: '../test', expect: '/' },
  { dev: true, publicUrl: './test/path', expect: '/' },
  { dev: true, publicUrl: 'https://create-react-app.dev/', expect: '/' },
  {
    dev: true,
    publicUrl: 'https://create-react-app.dev/test',
    expect: '/test/',
  },
  // DEVELOPMENT with publicURL and homepage
  { dev: true, publicUrl: '/', homepage: '/test', expect: '/' },
  { dev: true, publicUrl: '/test', homepage: '/path', expect: '/test/' },
  { dev: true, publicUrl: '/test/', homepage: '/test/path', expect: '/test/' },
  { dev: true, publicUrl: './', homepage: '/test', expect: '/' },
  { dev: true, publicUrl: '../', homepage: '/test', expect: '/' },
  { dev: true, publicUrl: '../test', homepage: '/test', expect: '/' },
  { dev: true, publicUrl: './test/path', homepage: '/test', expect: '/' },
  {
    dev: true,
    publicUrl: 'https://create-react-app.dev/',
    homepage: '/test',
    expect: '/',
  },
  {
    dev: true,
    publicUrl: 'https://create-react-app.dev/test',
    homepage: '/path',
    expect: '/test/',
  },

  // PRODUCTION with homepage
  { dev: false, homepage: '/', expect: '/' },
  { dev: false, homepage: '/test', expect: '/test/' },
  { dev: false, homepage: '/test/', expect: '/test/' },
  { dev: false, homepage: './', expect: './' },
  { dev: false, homepage: '../', expect: '../' },
  { dev: false, homepage: '../test', expect: '../test/' },
  { dev: false, homepage: './test/path', expect: './test/path/' },
  { dev: false, homepage: 'https://create-react-app.dev/', expect: '/' },
  {
    dev: false,
    homepage: 'https://create-react-app.dev/test',
    expect: '/test/',
  },
  // PRODUCTION with publicUrl
  { dev: false, publicUrl: '/', expect: '/' },
  { dev: false, publicUrl: '/test', expect: '/test/' },
  { dev: false, publicUrl: '/test/', expect: '/test/' },
  { dev: false, publicUrl: './', expect: './' },
  { dev: false, publicUrl: '../', expect: '../' },
  { dev: false, publicUrl: '../test', expect: '../test/' },
  { dev: false, publicUrl: './test/path', expect: './test/path/' },
  {
    dev: false,
    publicUrl: 'https://create-react-app.dev/',
    expect: 'https://create-react-app.dev/',
  },
  {
    dev: false,
    publicUrl: 'https://create-react-app.dev/test',
    expect: 'https://create-react-app.dev/test/',
  },
  // PRODUCTION with publicUrl and homepage
  { dev: false, publicUrl: '/', homepage: '/test', expect: '/' },
  { dev: false, publicUrl: '/test', homepage: '/path', expect: '/test/' },
  { dev: false, publicUrl: '/test/', homepage: '/test/path', expect: '/test/' },
  { dev: false, publicUrl: './', homepage: '/test', expect: './' },
  { dev: false, publicUrl: '../', homepage: '/test', expect: '../' },
  { dev: false, publicUrl: '../test', homepage: '/test', expect: '../test/' },
  {
    dev: false,
    publicUrl: './test/path',
    homepage: '/test',
    expect: './test/path/',
  },
  {
    dev: false,
    publicUrl: 'https://create-react-app.dev/',
    homepage: '/test',
    expect: 'https://create-react-app.dev/',
  },
  {
    dev: false,
    publicUrl: 'https://create-react-app.dev/test',
    homepage: '/path',
    expect: 'https://create-react-app.dev/test/',
  },
];

describe('getPublicUrlOrPath', () => {
  tests.forEach(t =>
    it(JSON.stringify(t), () => {
      const actual = getPublicUrlOrPath(t.dev, t.homepage, t.publicUrl);
      expect(actual).toBe(t.expect);
    })
  );
});