Back to Repositories

Testing Vue CLI Service Generator Configuration in vue-cli

This test suite validates the Vue CLI service generator functionality, focusing on CSS preprocessor configurations and Vue 3 compatibility. It ensures proper setup of SASS/SCSS styling options and validates correct Vue version-specific implementations.

Test Coverage Overview

The test suite provides comprehensive coverage of Vue CLI service generator configurations.

Tests SASS preprocessor integration with default configuration
Validates Dart SASS implementation
Verifies Vue 3 specific configurations and dependencies
Checks proper template and entry point generation

Implementation Analysis

The testing approach utilizes Jest’s async/await pattern for generator testing, implementing modular test cases for different configuration scenarios.

Tests employ the generateWithPlugin utility for consistent plugin initialization and leverage Jest’s expect assertions for validating file contents and package configurations.

Technical Details

Testing Framework: Jest
Test Utilities: @vue/cli-test-utils
Key Methods: generateWithPlugin, generateWithOptions
Test Focus: Package.json configuration, Vue component structure, CSS preprocessor setup

Best Practices Demonstrated

The test suite exemplifies clean testing practices with isolated test cases and clear assertions.

Modular test case organization
Consistent testing patterns across different configurations
Comprehensive file and configuration validation
Clear separation of concerns between different preprocessor options

vuejs/vue-cli

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

            
const generateWithPlugin = require('@vue/cli-test-utils/generateWithPlugin')

function generateWithOptions (options) {
  return generateWithPlugin([
    {
      id: '@vue/cli-service',
      apply: require('../generator'),
      options
    }
  ])
}

test('sass (default)', async () => {
  const { pkg, files } = await generateWithOptions({
    cssPreprocessor: 'sass'
  })

  expect(files['src/App.vue']).toMatch('<style lang="scss">')
  expect(pkg).toHaveProperty(['devDependencies', 'sass'])
})

test('dart sass', async () => {
  const { pkg, files } = await generateWithOptions({
    cssPreprocessor: 'dart-sass'
  })

  expect(files['src/App.vue']).toMatch('<style lang="scss">')
  expect(pkg).toHaveProperty(['devDependencies', 'sass'])
})

test('Vue 3', async () => {
  const { pkg, files } = await generateWithOptions({
    vueVersion: '3'
  })

  expect(pkg.dependencies.vue).toMatch('^3')

  expect(files['src/main.js']).toMatch(`import { createApp } from 'vue'`)

  expect(files['src/App.vue']).not.toMatch('<div id="app">')
})