Back to Repositories

Validating TypeScript Configuration Prompts in vue-cli

This test suite validates the TypeScript configuration prompts and integration with ESLint in Vue CLI. It ensures proper setup of TypeScript features alongside linting capabilities for Vue.js projects.

Test Coverage Overview

The test suite provides comprehensive coverage of TypeScript configuration options in Vue CLI.

Key areas tested include:

TypeScript and ESLint feature selection
Class-style component configuration
Babel integration options
Linter configuration with multiple formatter choices
Lint timing options (save/commit)

Implementation Analysis

The testing approach uses Jest’s mocking capabilities to simulate file system and user prompts. It implements a structured prompt validation pattern using the assertPromptModule utility, allowing verification of both input prompts and resulting configuration objects.

The test leverages Vue CLI’s testing utilities to validate prompt modules and their interactions.

Technical Details

Testing tools and setup:

Jest for test framework and mocking
@vue/cli-test-utils for prompt assertion
Mock implementations for fs and inquirer
Structured expected prompt and options objects
Plugin-specific configuration validation

Best Practices Demonstrated

The test exemplifies several testing best practices in the Vue CLI ecosystem.

Notable practices include:

Isolated testing through comprehensive mocking
Explicit expected state definitions
Modular test structure
Combined feature testing (TypeScript + ESLint)
Configuration object validation

vuejs/vue-cli

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

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

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

const moduleToTest = require('../typescript')
const linterModule = require('../linter')

test('with ESLint', async () => {
  const expectedPrompts = [
    {
      message: 'features',
      choices: ['TypeScript', 'Linter'],
      check: [0, 1]
    },
    {
      message: 'Use class-style component',
      confirm: true
    },
    {
      message: 'Use Babel',
      confirm: true
    },
    {
      message: 'Pick a linter / formatter',
      choices: ['ESLint with error prevention only', 'Airbnb', 'Standard', 'Prettier'],
      choose: [1]
    },
    {
      message: 'Pick additional lint features',
      choices: ['on save', 'on commit'],
      check: [0, 1]
    }
  ]

  const expectedOptions = {
    plugins: {
      '@vue/cli-plugin-eslint': {
        config: 'airbnb',
        lintOn: ['save', 'commit']
      },
      '@vue/cli-plugin-typescript': {
        classComponent: true,
        useTsWithBabel: true
      }
    }
  }

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