Back to Repositories

Testing Vue Router Prompt Module Implementation in vue-cli

This test suite validates the Vue CLI router prompt module functionality, ensuring proper configuration of router-related features during project setup. The tests verify prompt interactions and resulting plugin configurations.

Test Coverage Overview

The test suite provides comprehensive coverage of the Vue router configuration prompts.

Key areas tested include:

Router feature selection validation
History mode configuration verification
Plugin configuration generation

The suite focuses on validating both user input handling and expected output configurations.

Implementation Analysis

The testing approach utilizes Jest’s mocking capabilities to isolate the router prompt module functionality. The implementation employs the assertPromptModule utility for streamlined prompt testing, allowing verification of both prompt sequences and resulting configurations.

Key patterns include:

Mock implementations for filesystem and inquirer
Structured prompt validation
Plugin configuration assertion

Technical Details

Testing tools and configuration:

Jest test framework
Custom Vue CLI test utilities
Mock implementations for external dependencies
Structured assertion patterns

The setup leverages Vue CLI’s test utilities for consistent prompt testing across the codebase.

Best Practices Demonstrated

The test implementation showcases several testing best practices for prompt-based functionality.

Notable practices include:

Isolation of external dependencies through mocking
Clear expected vs actual state definitions
Structured test case organization
Comprehensive validation of both inputs and outputs

vuejs/vue-cli

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

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

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

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

test('router', async () => {
  const expectedPrompts = [
    {
      message: 'features',
      choices: ['Router'],
      check: [0]
    },
    {
      message: 'history mode',
      confirm: true
    }
  ]

  const expectedOptions = {
    plugins: {
      '@vue/cli-plugin-router': {
        historyMode: true
      }
    }
  }

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