Back to Repositories

Testing Babel Plugin Migration Implementation in Vue CLI

This test suite validates the Babel plugin migration functionality in Vue CLI, focusing on version upgrades and core-js dependency management. It ensures smooth transitions between different Babel plugin versions while maintaining proper dependency relationships.

Test Coverage Overview

The test suite provides comprehensive coverage of Babel plugin upgrade scenarios in Vue CLI.

Key areas tested include:

Migration from plugin-babel v3.5.3
Core-js dependency management during upgrades
Version range updates in package.json
Upgrade path from core-js v2 to v3

Implementation Analysis

The testing approach utilizes Jest’s asynchronous testing capabilities with project simulation utilities. It implements a create-and-verify pattern where test projects are dynamically created, upgraded, and verified.

Technical patterns include:

Async/await for project operations
JSON parsing for package.json validation
Version string comparison checks
Log message verification

Technical Details

Testing infrastructure includes:

Jest as the testing framework
@vue/cli-test-utils for project creation
@vue/cli-shared-utils for logging
Custom timeout configuration (300000ms)
Package.json manipulation utilities

Best Practices Demonstrated

The test suite exemplifies several testing best practices for dependency management validation.

Notable practices include:

Isolated test environments for each scenario
Explicit version checking
Comprehensive upgrade path validation
Proper cleanup and resource management
Clear test case separation

vuejs/vue-cli

packages/@vue/cli-plugin-babel/__tests__/babelMigrator.spec.js

            
const create = require('@vue/cli-test-utils/createUpgradableProject')
const { logs } = require('@vue/cli-shared-utils')

jest.setTimeout(300000)

test('upgrade: plugin-babel v3.5', async () => {
  const project = await create('plugin-babel-legacy', {
    plugins: {
      '@vue/cli-plugin-babel': {
        version: '3.5.3'
      }
    }
  })

  const pkg = JSON.parse(await project.read('package.json'))
  expect(pkg.dependencies).not.toHaveProperty('core-js')

  await project.upgrade('babel')

  const updatedPkg = JSON.parse(await project.read('package.json'))
  expect(updatedPkg.dependencies).toHaveProperty('core-js')

  expect(logs.log.some(([msg]) => msg.match('core-js has been upgraded'))).toBe(true)

  // should have updated the version range in package.json
  expect(updatedPkg.devDependencies['@vue/cli-plugin-babel']).not.toMatch('3.5.3')
})

test('upgrade: plugin-babel with core-js 2', async () => {
  const project = await create('plugin-babel-v3', {
    plugins: {
      '@vue/cli-plugin-babel': {
        version: '3.8.0'
      }
    }
  })

  const pkg = JSON.parse(await project.read('package.json'))
  expect(pkg.dependencies['core-js']).toMatch('^2')

  await project.upgrade('babel')

  const updatedPkg = JSON.parse(await project.read('package.json'))
  expect(updatedPkg.dependencies['core-js']).toMatch('^3')
})