Back to Repositories

Testing Babel Runtime Configuration and Polyfill Management in vue-cli

This test suite validates Babel runtime configuration and polyfill handling in Vue CLI projects. It focuses on ensuring proper transpilation of Babel helpers and preventing duplicate core-js imports.

Test Coverage Overview

The test suite covers critical aspects of Babel runtime behavior in Vue CLI projects.

Key areas tested include:

Prevention of multiple Babel helper transpilation
Verification of Symbol type handling
Validation of core-js-pure import prevention

Integration points focus on the interaction between Babel runtime and Vue CLI’s build process.

Implementation Analysis

The testing approach utilizes Jest with Puppeteer for end-to-end validation of build outputs. Tests employ project creation utilities and service runners to verify build artifacts and runtime behavior.

Notable patterns include:

Dynamic project creation for isolated testing
Build output analysis for specific imports
Runtime execution verification

Technical Details

Testing tools and configuration:

Jest as the test runner
@vue/cli-test-utils for project creation
Puppeteer for browser-based testing
Custom serve utilities for development server testing
Build mode configuration for development testing

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices for build tool configuration.

Notable practices include:

Isolated test environments for each case
Explicit verification of build outputs
Runtime behavior validation
Clear test case separation and organization
Comprehensive coverage of edge cases

vuejs/vue-cli

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

            
jest.setTimeout(80000)

const { defaultPreset } = require('@vue/cli/lib/options')
const create = require('@vue/cli-test-utils/createTestProject')
const serve = require('@vue/cli-test-utils/serveWithPuppeteer')

// iterableToArray no longer required in babel/runtime 7.8.7+
// test('should add polyfills for code in @babel/runtime', async () => {
//   const project = await create('babel-runtime-polyfills', defaultPreset)

//   await project.write('src/main.js', `
//   const x = function () {
//     setTimeout(
//       // eslint-disable-next-line
//       () => console.log(...arguments), 100
//     );
//   }
//   x(1, 2)
//   `)

//   await project.run('vue-cli-service build --mode development')
//   const vendorFile = await project.read('dist/js/chunk-vendors.js')

//   // iterableToArray is used to transform `console.log(...arguments)`
//   expect(vendorFile).toMatch('iterableToArray')
//   // with inline helpers, preset-env can detect the symbol polyfill is required
//   // (because the implementation of `iterableToArray` relies on it)
//   // however, with transform-runtime plugin, helpers are only references to @babel/runtime modules
//   // so we need to make sure polyfill detection is enabled for @babel/runtime too
//   expect(vendorFile).toMatch('es.symbol')
// })

test('should not transpile babel helpers multiple times', async () => {
  const project = await create('babel-runtime-helpers', defaultPreset)

  const mainjs = await project.read('src/main.js')
  await project.write('src/main.js', `
  // eslint-disable-next-line
  console.log(typeof Symbol('a'))

  ${mainjs}
  `)

  // if the typeof symbol helper is transpiled recursively,
  // there would be an error thrown and the page would be empty
  await serve(
    () => project.run('vue-cli-service serve'),
    async ({ helpers }) => {
      const msg = `Welcome to Your Vue.js App`
      expect(await helpers.getText('h1')).toMatch(msg)
    }
  )
})

// #4742 core-js-pure imports are likely to be caused by
// incorrect configuration of @babel/plugin-transform-runtime
test('should not introduce polyfills from core-js-pure', async () => {
  const project = await create('babel-runtime-no-duplicate-core-js', defaultPreset)

  await project.write('src/main.js', `
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  methods: {
    myfunc: async function () {}
  }
}).$mount('#app')
  `)

  await project.run('vue-cli-service build --mode development')
  const vendorFile = await project.read('dist/js/chunk-vendors.js')

  expect(vendorFile).not.toMatch('core-js-pure')
})