Back to Repositories

Testing Babel Configuration Prompt Module in Vue CLI

This test suite validates the Babel configuration module in Vue CLI, focusing on prompt interactions and TypeScript integration scenarios. It verifies proper plugin installation and configuration options across different setup combinations.

Test Coverage Overview

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

Key areas tested include:

Basic Babel plugin installation
TypeScript integration with Babel enabled
TypeScript setup without Babel
Plugin configuration validation

Implementation Analysis

The testing approach uses Jest’s mocking capabilities to simulate file system and user prompts. It leverages the assertPromptModule utility to validate prompt flows and resulting configurations.

Key patterns include:

Mock module injection for TypeScript scenarios
Expected prompt validation
Plugin configuration verification

Technical Details

Testing tools and setup:

Jest for test framework and mocking
Custom assertPromptModule utility
Mock implementations for fs and inquirer
TypeScript integration testing helpers

Best Practices Demonstrated

The test suite exemplifies strong testing practices through isolated test cases and comprehensive scenario coverage.

Notable practices include:

Clear test case separation
Explicit expected outcomes
Mock module composition
Edge case handling for different configurations

vuejs/vue-cli

packages/@vue/cli/lib/promptModules/__tests__/babel.spec.js

            
jest.mock('fs')
jest.mock('inquirer')

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

const moduleToTest = require('../babel')

test('should pass', async () => {
  const expectedPrompts = [
    {
      message: 'features',
      check: [0]
    }
  ]

  const expectedOptions = {
    plugins: {
      '@vue/cli-plugin-babel': {}
    }
  }

  await assertPromptModule(
    moduleToTest,
    expectedPrompts,
    expectedOptions,
    { pluginsOnly: true }
  )
})

test('with TS', async () => {
  const mockTSModule = api => {
    api.onPromptComplete(answers => {
      answers.useTsWithBabel = true
      answers.features.push('ts')
    })
  }

  const expectedPrompts = [
    {
      message: 'features',
      check: [] // no need to check if "useTsWithBabel" is explicitly true
    }
  ]

  const expectedOptions = {
    plugins: {
      '@vue/cli-plugin-babel': {}
    }
  }

  await assertPromptModule(
    [mockTSModule, moduleToTest],
    expectedPrompts,
    expectedOptions,
    { pluginsOnly: true }
  )
})

test('with TS, no Babel', async () => {
  const mockTSModule = api => {
    api.onPromptComplete(answers => {
      answers.features.push('ts')
    })
  }

  const expectedPrompts = [
    {
      message: 'features',
      check: []
    }
  ]

  const expectedOptions = {
    plugins: {}
  }

  await assertPromptModule(
    [mockTSModule, moduleToTest],
    expectedPrompts,
    expectedOptions,
    { pluginsOnly: true }
  )
})