Back to Repositories

Testing Named Asset Import Transformations in create-react-app

This test suite validates the babel-plugin-named-asset-import functionality, focusing on SVG import transformations in React applications. It ensures proper handling of various import/export patterns and SVG component transformations using the @svgr/webpack loader.

Test Coverage Overview

The test suite provides comprehensive coverage of asset import scenarios, particularly for SVG files in React applications.

Tests default and named import patterns
Validates SVG-specific import transformations
Covers various export scenarios including default, named, and multiple exports
Tests ReactComponent transformations with @svgr/webpack loader

Implementation Analysis

The testing approach utilizes babel-plugin-tester for streamlined Babel plugin testing. Each test case defines input code and expected output, focusing on transformation accuracy.

Uses pluginTester.default configuration
Implements loaderMap for SVG transformations
Tests both simple and complex import/export patterns

Technical Details

babel-plugin-tester/pure for testing framework
@svgr/webpack loader configuration
Custom loaderMap implementation
Snapshot testing disabled for explicit output verification

Best Practices Demonstrated

The test suite exemplifies robust testing practices for Babel plugin development.

Comprehensive case coverage for import/export scenarios
Clear test case organization and naming
Explicit output verification instead of snapshots
Thorough edge case handling for SVG imports

facebook/create-react-app

packages/babel-plugin-named-asset-import/index.test.js

            
'use strict';

const pluginTester = require('babel-plugin-tester/pure');
const namedAssetImport = require('./index');

pluginTester.default({
  plugin: namedAssetImport,
  pluginOptions: {
    loaderMap: {
      svg: {
        ReactComponent: '@svgr/webpack?-svgo![path]',
      },
    },
  },
  pluginName: 'named-asset-import',
  snapshot: false,
  tests: {
    defaultImport: {
      code: 'import logo from "logo";',
      output: 'import logo from "logo";',
    },
    namedImport: {
      code: 'import { logo } from "logo";',
      output: 'import { logo } from "logo";',
    },
    namedImportRenamed: {
      code: 'import { Url as logo1 } from "logo";',
      output: 'import { Url as logo1 } from "logo";',
    },
    svgDefaultImport: {
      code: 'import logo from "logo.svg";',
      output: 'import logo from "logo.svg";',
    },
    svgNamedImport: {
      code: 'import { logo } from "logo.svg";',
      output: 'import { logo } from "logo.svg";',
    },
    svgReactComponentNamedImport: {
      code: 'import { ReactComponent as logo } from "logo.svg";',
      output:
        'import { ReactComponent as logo } from "@svgr/webpack?-svgo!logo.svg";',
    },
    svgMultipleImport: {
      code: 'import logo, { logoUrl , ReactComponent as Logo } from "logo.svg";',
      output:
        'import logo from "logo.svg";\n' +
        'import { logoUrl } from "logo.svg";\n' +
        'import { ReactComponent as Logo } from "@svgr/webpack?-svgo!logo.svg";',
    },
    defaultExport: {
      code: 'export default logo;',
      output: 'export default logo;',
    },
    constExport: {
      code: 'export const token = "token";',
      output: 'export const token = "token";',
    },
    classExport: {
      code: 'export class Logo {}',
      output: 'export class Logo {}',
    },
    namedExport: {
      code: 'export { logo } from "logo";',
      output: 'export { logo } from "logo";',
    },
    namedExportRenamed: {
      code: 'export { Url as logo } from "logo";',
      output: 'export { Url as logo } from "logo";',
    },
    allExport: {
      code: 'export * from "logo";',
      output: 'export * from "logo";',
    },
    svgNamedExport: {
      code: 'export { logo } from "logo.svg";',
      output: 'export { logo } from "logo.svg";',
    },
    svgAllExport: {
      code: 'export * from "logo.svg";',
      output: 'export * from "logo.svg";',
    },
    svgReactComponentNamedExport: {
      code: 'export { ReactComponent as Logo } from "logo.svg";',
      output:
        'export { ReactComponent as Logo } from "@svgr/webpack?-svgo!logo.svg";',
    },
    svgReactComponentExport: {
      code: 'export { ReactComponent } from "logo.svg";',
      output: 'export { ReactComponent } from "@svgr/webpack?-svgo!logo.svg";',
    },
    svgMultipleExport: {
      code: 'export { logoUrl , ReactComponent as Logo } from "logo.svg";',
      output:
        'export { logoUrl } from "logo.svg";\n' +
        'export { ReactComponent as Logo } from "@svgr/webpack?-svgo!logo.svg";',
    },
  },
});