Back to Repositories

Testing JavaScript Configuration Extension Functionality in vue-cli

This test suite validates the configuration extension functionality in Vue CLI, focusing on how JavaScript configurations are merged and modified. The tests verify the behavior of extending and overriding configuration objects in various scenarios, including basic property merging, defineConfig usage, and handling undefined values.

Test Coverage Overview

The test suite provides comprehensive coverage of configuration extension scenarios in Vue CLI.

Basic configuration merging with nested objects
Integration with Vue CLI’s defineConfig helper
Property addition and removal scenarios
Handling of undefined values
Non-direct configuration assignments

Implementation Analysis

The testing approach uses Jest’s expect assertions to validate configuration transformations. The tests employ string matching to verify exact output formatting, ensuring both the content and structure of the generated configurations are correct.

String-based configuration comparison
Multiple test cases for different config patterns
Consistent newline handling across platforms

Technical Details

Jest test framework
Custom extend utility function
Line ending normalization (/\r\n/g)
Module.exports pattern testing
defineConfig integration testing

Best Practices Demonstrated

The test suite exemplifies strong testing practices by covering both common and edge cases in configuration management.

Isolated test cases for specific functionality
Consistent test structure and naming
Clear input/output expectations
Platform-independent testing approach

vuejs/vue-cli

packages/@vue/cli/lib/util/__tests__/extendJSConfig.spec.js

            
const _extend = require('../extendJSConfig')

function extend (value, source) {
  return _extend(value, source).replace(/\r\n/g, '\n')
}

test(`basic`, () => {
  const value = {
    foo: true,
    css: {
      modules: true
    }
  }
  const source =
`module.exports = {
  foo: false,
  css: {
    modules: false
  }
}`
  expect(extend(value, source)).toMatch(
    `module.exports = {
  foo: true,
  css: {
    modules: true
  }
}`
  )
})

test(`defineConfig`, () => {
  const value = {
    foo: true,
    css: {
      modules: true
    }
  }
  const source =
`const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  foo: false,
  css: {
    modules: false
  }
})`
  expect(extend(value, source)).toMatch(
    `const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  foo: true,
  css: {
    modules: true
  }
})`
  )
})

test(`adding new property`, () => {
  const value = {
    foo: true
  }
  const source =
`module.exports = {
  bar: 123
}`
  expect(extend(value, source)).toMatch(
    `module.exports = {
  bar: 123,
  foo: true
}`
  )
})

test(`non direct assignment`, () => {
  const value = {
    foo: true
  }
  const source =
`const config = {
  bar: 123
}
module.exports = config`
  expect(extend(value, source)).toMatch(
    `const config = {
  bar: 123,
  foo: true
}
module.exports = config`
  )
})

test(`with extra assignment expression`, () => {
  const value = {
    foo: true
  }
  const source =
`process.env.VUE_APP_TEST = 'test'
module.exports = {
  bar: 123
}`
  expect(extend(value, source)).toMatch(
    `process.env.VUE_APP_TEST = 'test'
module.exports = {
  bar: 123,
  foo: true
}`
  )
})

test(`add a new undefined property`, () => {
  const value = {
    foo: undefined
  }
  const source = `module.exports = {
  bar: 123
}`

  expect(extend(value, source)).toMatch(source)
})

test(`change an existing property to undefined`, () => {
  const value = {
    foo: undefined
  }
  const source = `module.exports = {
  foo: 123,
  bar: 456
}`
  expect(extend(value, source)).toMatch(
    `module.exports = {
  bar: 456
}`
  )
})