Back to Repositories

Testing Library Build Format Configurations in Vue CLI

This test suite validates the library build formats functionality in Vue CLI, focusing on different output formats like CommonJS, UMD, and minified versions. It ensures the build system correctly generates the expected distribution files and handles various format configurations.

Test Coverage Overview

The test suite provides comprehensive coverage of Vue CLI’s library build functionality, testing multiple output format combinations.

Tests default format builds generating all expected files
Validates specific format combinations (commonjs+umd)
Verifies minified-only builds
Tests error handling for invalid formats

Implementation Analysis

The testing approach uses Jest’s asynchronous testing capabilities with project simulation through @vue/cli-test-utils. Each test case creates a test project and executes build commands with different format configurations.

Utilizes async/await for build operations
Implements file existence verification
Tests both successful and failure scenarios

Technical Details

Testing Framework: Jest
Test Utilities: @vue/cli-test-utils
Build Tool: vue-cli-service
Test Setup: Creates temporary test projects
Timeout: 40 seconds per test
Test Environment: Node.js

Best Practices Demonstrated

The test suite exemplifies robust testing practices for build tools and CLI utilities. It demonstrates thorough validation of build outputs and proper error handling.

Isolated test environments
Comprehensive format testing
Error case validation
Clear test case organization
Efficient resource cleanup

vuejs/vue-cli

packages/@vue/cli-service/__tests__/buildLibFormats.spec.js

            
jest.setTimeout(40000)

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

let project

beforeAll(async () => {
  project = await create('build-lib-formats', defaultPreset)
})

test('build as lib with default formats', async () => {
  const { stdout } = await project.run('vue-cli-service build --target lib --name testLib src/components/HelloWorld.vue')
  expect(stdout).toMatch('Build complete.')

  expect(project.has('dist/demo.html')).toBe(true)
  expect(project.has('dist/testLib.common.js')).toBe(true)
  expect(project.has('dist/testLib.umd.js')).toBe(true)
  expect(project.has('dist/testLib.umd.min.js')).toBe(true)
  expect(project.has('dist/testLib.css')).toBe(true)
})
test('build as lib with formats commonjs and umd', async () => {
  const { stdout } = await project.run('vue-cli-service build --target lib --formats commonjs,umd --name testLib src/components/HelloWorld.vue')
  expect(stdout).toMatch('Build complete.')

  expect(project.has('dist/demo.html')).toBe(true)
  expect(project.has('dist/testLib.common.js')).toBe(true)
  expect(project.has('dist/testLib.umd.js')).toBe(true)
  expect(project.has('dist/testLib.umd.min.js')).toBe(false)
  expect(project.has('dist/testLib.css')).toBe(true)
})

test('build as lib with format umd-min', async () => {
  const { stdout } = await project.run('vue-cli-service build --target lib --formats umd-min --name testLib src/components/HelloWorld.vue')
  expect(stdout).toMatch('Build complete.')

  expect(project.has('dist/demo.html')).toBe(false)
  expect(project.has('dist/testLib.common.js')).toBe(false)
  expect(project.has('dist/testLib.umd.js')).toBe(false)
  expect(project.has('dist/testLib.umd.min.js')).toBe(true)
  expect(project.has('dist/testLib.css')).toBe(true)
})

test('build as lib with unknown formats throws an error', async () => {
  try {
    await project.run('vue-cli-service build --target lib --formats umd,x,y --name testLib src/components/HelloWorld.vue')
  } catch (e) {
    expect(e.code).toBe(1)
    expect(e.failed).toBeTruthy()
  }
})