Back to Repositories

Testing Vue Router Plugin Generation in vue-cli

This test suite validates the Vue Router plugin generator functionality in the Vue CLI ecosystem. It ensures proper router setup, configuration options, and integration with different Vue versions and build tools.

Test Coverage Overview

The test suite provides comprehensive coverage of Vue Router plugin generation scenarios.

Key areas tested include:

Basic router setup and file generation
History mode configuration
Integration with Babel
Vue 3 compatibility
TypeScript support

Implementation Analysis

The testing approach uses Jest’s expect assertions to verify generated files and configurations. It leverages the generateWithPlugin utility to simulate plugin installation scenarios.

Key patterns include:

Asynchronous plugin generation testing
File content validation
Package dependency verification
Version-specific implementation checks

Technical Details

Testing infrastructure includes:

Jest testing framework
Vue CLI test utilities
Mock plugin generators
File system validation
Package.json manipulation checks

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices with isolated test cases and thorough assertion coverage.

Notable practices include:

Modular test organization
Comprehensive edge case handling
Cross-version compatibility testing
Configuration validation

vuejs/vue-cli

packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js

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

test('base', async () => {
  const { files, pkg } = await generateWithPlugin({
    id: 'router',
    apply: require('../generator'),
    options: {}
  })

  expect(files['src/router/index.js']).toBeTruthy()
  expect(files['src/router/index.js']).not.toMatch('history')
  expect(files['src/views/AboutView.vue']).toBeTruthy()
  expect(files['src/views/HomeView.vue']).toBeTruthy()
  expect(files['src/App.vue']).toMatch('<router-link to="/">Home</router-link>')
  expect(files['src/App.vue']).not.toMatch('<script>')
  expect(files['src/App.vue']).toMatch('nav a.router-link-exact-active')

  expect(pkg.dependencies).toHaveProperty('vue-router')
})

test('history mode', async () => {
  const { files, pkg } = await generateWithPlugin({
    id: 'router',
    apply: require('../generator'),
    options: {
      historyMode: true
    }
  })

  expect(files['src/router/index.js']).toBeTruthy()
  expect(files['src/router/index.js']).toMatch('history')
  expect(files['src/views/AboutView.vue']).toBeTruthy()
  expect(files['src/views/HomeView.vue']).toBeTruthy()
  expect(files['src/App.vue']).toMatch('<router-link to="/">Home</router-link>')
  expect(files['src/App.vue']).not.toMatch('<script>')
  expect(files['src/App.vue']).toMatch('nav a.router-link-exact-active')

  expect(pkg.dependencies).toHaveProperty('vue-router')
})

test('use with Babel', async () => {
  const { pkg, files } = await generateWithPlugin([
    {
      id: 'babel',
      apply: require('@vue/cli-plugin-babel/generator'),
      options: {}
    },
    {
      id: 'router',
      apply: require('../generator'),
      options: {}
    }
  ])

  expect(files['src/router/index.js']).toBeTruthy()
  expect(files['src/router/index.js']).toMatch('component: () => import')
  expect(files['src/views/AboutView.vue']).toBeTruthy()
  expect(files['src/views/HomeView.vue']).toBeTruthy()
  expect(files['src/App.vue']).toMatch('<router-link to="/">Home</router-link>')
  expect(files['src/App.vue']).not.toMatch('<script>')
  expect(files['src/App.vue']).toMatch('nav a.router-link-exact-active')

  expect(pkg.dependencies).toHaveProperty('vue-router')
})

test('use with Vue 3', async () => {
  const { files, pkg } = await generateWithPlugin([
    {
      id: '@vue/cli-service',
      apply: require('@vue/cli-service/generator'),
      options: {
        vueVersion: '3'
      }
    },
    {
      id: '@vue/cli-plugin-router',
      apply: require('../generator'),
      options: {}
    }
  ])

  expect(files['src/router/index.js']).toBeTruthy()
  expect(files['src/router/index.js']).toMatch('createRouter')
  expect(files['src/router/index.js']).toMatch('history: createWebHashHistory()')

  expect(files['src/main.js']).toMatch('.use(router)')

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

  expect(pkg.dependencies).toHaveProperty('vue-router')
  expect(pkg.dependencies['vue-router']).toMatch('^4')
})

test('Vue 3 + History Mode', async () => {
  const { files } = await generateWithPlugin([
    {
      id: '@vue/cli-service',
      apply: require('@vue/cli-service/generator'),
      options: {
        vueVersion: '3'
      }
    },
    {
      id: '@vue/cli-plugin-router',
      apply: require('../generator'),
      options: {
        historyMode: true
      }
    }
  ])

  expect(files['src/router/index.js']).toMatch(/import {.*createWebHistory/)
  expect(files['src/router/index.js']).toMatch('history: createWebHistory(process.env.BASE_URL)')
})

test('Vue 3 + TypeScript', async () => {
  const { files } = await generateWithPlugin([
    {
      id: '@vue/cli-service',
      apply: require('@vue/cli-service/generator'),
      options: {
        vueVersion: '3'
      }
    },
    {
      id: '@vue/cli-plugin-router',
      apply: require('../generator'),
      options: {}
    },
    {
      id: '@vue/cli-plugin-typescript',
      apply: require('@vue/cli-plugin-typescript/generator'),
      options: {}
    }
  ])

  expect(files['src/router/index.ts']).toBeTruthy()
  expect(files['src/router/index.ts']).toMatch(/import {.*RouteRecordRaw/)
  expect(files['src/router/index.ts']).toMatch('const routes: Array<RouteRecordRaw> =')
})