Back to Repositories

Testing Babel Preset Environment Configuration in Parcel Bundler

This test suite validates the behavior of Parcel’s Babel preset environment configuration, focusing on how code transformations are handled based on different caller contexts and browser targets. The tests ensure proper compilation behavior for modern JavaScript features like classes and exponents.

Test Coverage Overview

The test suite provides comprehensive coverage of the @parcel/babel-preset-env functionality.

Key areas tested include:

Compilation behavior with Parcel 2.x caller context
Handling of non-Parcel caller contexts
Default behavior without caller information
Transformation of modern JavaScript features

Implementation Analysis

The testing approach uses Jest’s describe/it pattern to organize related test cases systematically. Each test case utilizes Babel’s transformSync API to process sample JavaScript code with different caller configurations, validating the resulting transformations through assertions.

The implementation employs string matching to verify the presence or absence of specific JavaScript features in the transformed output.

Technical Details

Testing tools and configuration:

@babel/core for code transformation
Jest as the testing framework
Flow type checking enabled
Custom preset configuration via require.resolve
Mock input code featuring ES6+ syntax

Best Practices Demonstrated

The test suite exemplifies several testing best practices for JavaScript build tools.

Notable practices include:

Isolated test cases with clear assertions
Consistent test structure and naming
Comprehensive edge case coverage
Clear input/output validation
Proper module resolution handling

parcel-bundler/parcel

packages/utils/babel-preset-env/test/preset-env.test.js

            
// @flow

import * as babel from '@babel/core';
import assert from 'assert';

const input = `
export default class Foo {
  constructor(x) {
    this.x = x;
  }

  load() {
    import('./bar');
  }

  square() {
    return this.x ** 2;
  }
}
`;

const preset = require.resolve('../src');

describe('@parcel/babel-preset-env', () => {
  it('compiles against targets passed through caller when the caller is parcel 2.x', () => {
    let {code: transformed} = babel.transformSync(input, {
      configFile: false,
      presets: [preset],
      caller: {
        name: 'parcel',
        version: '2.0.0',
        targets: JSON.stringify({
          browsers: ['last 1 Chrome version'],
        }),
      },
    });

    assert(transformed.includes('class Foo'));
    assert(transformed.includes('this.x ** 2'));
    assert(transformed.includes('export default'));
  });

  it('does not compile against targets passed through caller when the caller is not parcel', () => {
    let {code: transformed} = babel.transformSync(input, {
      configFile: false,
      presets: [preset],
      caller: {
        name: 'foo',
        version: '2.0.0',
        targets: JSON.stringify({
          browsers: ['last 1 Chrome version'],
        }),
      },
    });

    assert(!transformed.includes('class Foo'));
    assert(!transformed.includes('this.x ** 2'));
    assert(!transformed.includes('export default'));
  });

  it('does not compile against targets passed through caller when the caller is not present', () => {
    let {code: transformed} = babel.transformSync(input, {
      configFile: false,
      presets: [preset],
    });

    assert(!transformed.includes('class Foo'));
    assert(!transformed.includes('this.x ** 2'));
    assert(!transformed.includes('export default'));
  });
});