Back to Repositories

Testing Vue 3 Mocha Integration Implementation in vue-cli

This test suite validates the integration of Mocha unit testing with Vue 3 projects created using Vue CLI. It ensures proper test configuration and compatibility for both standard JavaScript and TypeScript implementations.

Test Coverage Overview

The test suite covers essential Vue 3 compatibility scenarios with Mocha testing framework.

Validates basic Vue 3 project setup with Mocha testing
Tests TypeScript integration with Vue 3 and Mocha
Verifies correct @vue/test-utils version compatibility
Confirms successful test execution via CLI service

Implementation Analysis

The testing approach utilizes Jest’s asynchronous testing capabilities with extended timeout settings for thorough project creation and testing. The implementation leverages Vue CLI’s test utilities for creating upgradable projects, ensuring proper plugin configuration and dependency management.

Async/await pattern for project setup and test execution
Package.json validation for correct dependency versions
CLI service command execution verification

Technical Details

Jest test runner with 3000000ms timeout
@vue/cli-test-utils for project creation
@vue/test-utils v2 for Vue 3 compatibility
Vue CLI service for test execution
Babel and TypeScript plugin integration

Best Practices Demonstrated

The test suite demonstrates robust integration testing practices for Vue CLI plugins.

Isolated test environments for each configuration
Explicit version checking for dependencies
Comprehensive plugin combination testing
Clear separation of concerns between JavaScript and TypeScript scenarios

vuejs/vue-cli

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

            
jest.setTimeout(3000000)
const createOutside = require('@vue/cli-test-utils/createUpgradableProject')

test('should work with Vue 3', async () => {
  const project = await createOutside('unit-mocha-vue-3', {
    vueVersion: '3',
    plugins: {
      '@vue/cli-plugin-babel': {},
      '@vue/cli-plugin-unit-mocha': {}
    }
  })
  const pkg = JSON.parse(await project.read('package.json'))
  expect(pkg.devDependencies['@vue/test-utils']).toMatch('^2')
  await project.run(`vue-cli-service test:unit`)
})

test('should work with Vue 3 + TS', async () => {
  const project = await createOutside('unit-mocha-vue-3-ts', {
    vueVersion: '3',
    plugins: {
      '@vue/cli-plugin-babel': {},
      '@vue/cli-plugin-typescript': {},
      '@vue/cli-plugin-unit-mocha': {}
    }
  })
  const pkg = JSON.parse(await project.read('package.json'))
  expect(pkg.devDependencies['@vue/test-utils']).toMatch('^2')
  await project.run(`vue-cli-service test:unit`)
})