Back to Repositories

Testing TypeScript Detection Logic in Create React App

This test suite validates TypeScript detection behavior in Create React App, specifically focusing on proper handling of node_modules directories and TypeScript file detection. It ensures that TypeScript configuration is only generated when necessary and node_modules are correctly excluded from TypeScript detection.

Test Coverage Overview

The test suite provides comprehensive coverage of TypeScript detection scenarios in Create React App builds.

Key areas tested include:

TypeScript file detection in node_modules directories
Declaration file (.d.ts) handling
TypeScript configuration generation
Path-specific TypeScript detection logic

Implementation Analysis

The test implements a step-by-step verification approach using filesystem operations and build script execution. It utilizes Jest’s async/await pattern for handling build processes and employs filesystem manipulation to create test scenarios.

Technical implementation features:

Directory structure creation
File generation and verification
Build script execution
Configuration file presence validation

Technical Details

Testing tools and configuration:

Jest test framework
Node.js path and fs modules
Custom test setup utilities
Mock filesystem structures
Build script integration

Best Practices Demonstrated

The test demonstrates several testing best practices for configuration and build tool validation.

Notable practices include:

Isolated test environment setup
Sequential test steps with clear progression
Explicit file path handling
Asynchronous operation management
Clear test case separation

facebook/create-react-app

test/fixtures/issue-5947-not-typescript/index.test.js

            
'use strict';

const testSetup = require('../__shared__/test-setup');
const path = require('path');
const fs = require('fs');

test('Ignores node_modules when detecting TypeScript', async () => {
  // CRA build will check for TypeScript files by
  // globbing for src/**/*.ts however this shouldn't
  // include any node_modules directories within src.
  // See https://github.com/facebook/create-react-app/issues/5947

  const tsConfigPath = path.join(testSetup.testDirectory, 'tsconfig.json');
  const tsPackagePath = [
    testSetup.testDirectory,
    'src',
    'node_modules',
    'package',
    'index.ts',
  ];
  const dtsSrcPath = [testSetup.testDirectory, 'src', 'types', 'index.d.ts'];
  const tsSrcPath = path.join(testSetup.testDirectory, 'src', 'index.ts');

  // Step 1.
  // See if src/node_modules/package/index.ts is treated
  // as a JS project
  fs.mkdirSync(path.join(...tsPackagePath.slice(0, 2)));
  fs.mkdirSync(path.join(...tsPackagePath.slice(0, 3)));
  fs.mkdirSync(path.join(...tsPackagePath.slice(0, 4)));
  fs.writeFileSync(path.join(...tsPackagePath));
  await testSetup.scripts.build();
  expect(fs.existsSync(tsConfigPath)).toBe(false);

  // Step 1b.
  // See if src/types/index.d.ts is treated as a JS project
  fs.mkdirSync(path.join(...dtsSrcPath.slice(0, 3)));
  fs.writeFileSync(path.join(...dtsSrcPath));
  await testSetup.scripts.build();
  expect(fs.existsSync(tsConfigPath)).toBe(false);

  // Step 2.
  // Add TS and ensure tsconfig.json is generated
  fs.writeFileSync(tsSrcPath);
  await testSetup.scripts.build();
  expect(fs.existsSync(tsConfigPath)).toBe(true);
});