Back to Repositories

Testing Mocha Unit Test Generator Integration in Vue CLI

This test suite validates the Mocha unit test generator functionality in Vue CLI, ensuring proper test file generation and TypeScript integration. It verifies various plugin combinations and configurations to maintain robust testing capabilities across different Vue.js project setups.

Test Coverage Overview

The test suite provides comprehensive coverage of the Mocha test generator’s functionality across different Vue CLI configurations.

Base configuration testing with ESLint integration
TypeScript support verification
Bare project setup testing
Router integration scenarios
Combined TypeScript and router configurations

Implementation Analysis

The testing approach utilizes Jest’s testing framework to validate the Mocha generator’s output. It employs modular test cases that systematically verify file generation, package configuration, and proper integration with various Vue CLI plugins.

Plugin generation testing using generateWithPlugin utility
File content validation using expect assertions
TypeScript configuration verification
Component mounting scenarios testing

Technical Details

Testing Framework: Jest
Key Dependencies: @vue/test-utils, chai
Test Utilities: generateWithPlugin, createTestProject
Configuration Files: tsconfig.json
File Types: .js and .ts test specifications

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices through systematic validation of all possible plugin combinations and configurations.

Isolated test cases for specific functionality
Comprehensive edge case coverage
Clear test case organization
Proper assertion usage
Efficient test setup and teardown

vuejs/vue-cli

packages/@vue/cli-plugin-unit-mocha/__tests__/mochaGenerator.spec.js

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

test('base', async () => {
  const { pkg, files } = await generateWithPlugin([
    {
      id: 'unit-mocha',
      apply: require('../generator'),
      options: {}
    },
    // mock presence of the eslint plugin
    {
      id: 'eslint',
      apply: () => {},
      options: {}
    }
  ])

  expect(pkg.scripts['test:unit']).toBe('vue-cli-service test:unit')
  expect(pkg.devDependencies).toHaveProperty('@vue/test-utils')

  const spec = files['tests/unit/example.spec.js']
  expect(spec).toMatch(`import { expect } from 'chai'`)
  expect(spec).toMatch(`expect(wrapper.text()).to.include(msg)`)
})

test('with TS', async () => {
  const { files } = await generateWithPlugin([
    {
      id: 'unit-mocha',
      apply: require('../generator'),
      options: {}
    },
    // mock presence of the ts plugin
    {
      id: 'typescript',
      apply: () => {},
      options: {}
    }
  ])

  const spec = files['tests/unit/example.spec.ts']
  expect(spec).toMatch(`import { expect } from 'chai'`)
  expect(spec).toMatch(`expect(wrapper.text()).to.include(msg)`)
})

test('bare', async () => {
  const { files } = await generateWithPlugin([
    {
      id: 'unit-mocha',
      apply: require('../generator'),
      options: {}
    },
    {
      id: '@vue/cli-service',
      apply: () => {},
      options: { bare: true }
    }
  ])

  const spec = files['tests/unit/example.spec.js']
  expect(spec).toMatch(`const wrapper = shallowMount(App)`)
  expect(spec).toMatch(`expect(wrapper.text()).to.include(\`Welcome to Your Vue.js App\`)`)
})

test('TS + bare', async () => {
  const { files } = await generateWithPlugin([
    {
      id: 'unit-mocha',
      apply: require('../generator'),
      options: {}
    },
    {
      id: 'typescript',
      apply: () => {},
      options: {}
    },
    {
      id: '@vue/cli-service',
      apply: () => {},
      options: { bare: true }
    }
  ])

  const spec = files['tests/unit/example.spec.ts']
  expect(spec).toMatch(`const wrapper = shallowMount(App)`)
  expect(spec).toMatch(`expect(wrapper.text()).to.include(\`Welcome to Your Vue.js + TypeScript App\`)`)
})

test('bare + router', async () => {
  const { files } = await generateWithPlugin([
    {
      id: 'unit-mocha',
      apply: require('../generator'),
      options: {}
    },
    {
      id: '@vue/cli-service',
      apply: () => {},
      options: { bare: true }
    },
    {
      id: 'router',
      apply: () => {},
      options: {}
    }
  ])

  const spec = files['tests/unit/example.spec.js']
  expect(spec).toMatch(`const wrapper = mount(App,`)
  expect(spec).toMatch(`expect(wrapper.text()).to.include(\`Welcome to Your Vue.js App\`)`)
})

test('TS + bare + router', async () => {
  const { files } = await generateWithPlugin([
    {
      id: 'unit-mocha',
      apply: require('../generator'),
      options: {}
    },
    {
      id: 'typescript',
      apply: () => {},
      options: {}
    },
    {
      id: '@vue/cli-service',
      apply: () => {},
      options: { bare: true }
    },
    {
      id: 'router',
      apply: () => {},
      options: {}
    }
  ])

  const spec = files['tests/unit/example.spec.ts']
  expect(spec).toMatch(`const wrapper = mount(App,`)
  expect(spec).toMatch(`expect(wrapper.text()).to.include(\`Welcome to Your Vue.js App\`)`)
})

test('add types to existing tsconfig.json', async () => {
  const { dir, read, write } = await create('unit-mocha-tsconfig', {
    plugins: {
      '@vue/cli-plugin-typescript': {},
      '@vue/cli-plugin-unit-mocha': {}
    }
  })
  await write('tsconfig.json', JSON.stringify({ compilerOptions: { types: ['some-type'] } }))

  const invoke = require('@vue/cli/lib/invoke')
  await invoke('unit-mocha', {}, dir)

  const tsconfig = await read('tsconfig.json')
  expect(tsconfig).toMatch(/\r?\n$/)
  expect(JSON.parse(tsconfig).compilerOptions.types).toEqual(['some-type', 'mocha', 'chai'])
}, 30000)