Back to Repositories

Testing Vue Component Rendering and Props Validation in vue-cli

This test suite demonstrates unit testing for Vue.js components using TypeScript, Mocha, and Chai assertions. It showcases component mounting, props validation, and router integration testing in a Vue CLI project environment.

Test Coverage Overview

The test suite provides comprehensive coverage for Vue component rendering and prop handling.

Tests component mounting and rendering
Validates prop passing and text content
Handles both basic and router-enabled component scenarios
Covers Vue 2 and Vue 3 compatibility cases

Implementation Analysis

The implementation utilizes Vue Test Utils for component mounting and interaction testing. It employs TypeScript for type-safe testing, with conditional logic handling different Vue CLI configurations.

Uses shallowMount for isolated component testing
Implements createLocalVue for router integration
Handles both Vue 2 propsData and Vue 3 props syntax

Technical Details

Testing Framework: Mocha with Chai assertions
Component Testing: @vue/test-utils
Language: TypeScript
Key Dependencies: Vue Router (for router tests)
Test Utilities: shallowMount, mount, createLocalVue

Best Practices Demonstrated

The test suite exemplifies Vue.js testing best practices with clean, focused test cases and proper component isolation.

Component isolation through shallowMount
Proper test suite organization with describe blocks
Consistent assertion patterns
Conditional testing setup based on project configuration

vuejs/vue-cli

packages/@vue/cli-plugin-unit-mocha/generator/template/tests/unit/example.spec.ts

            
<%_ if (hasTS) { _%>
import { expect } from 'chai'
<%_ if (!rootOptions.bare || !hasRouter) { _%>
import { shallowMount } from '@vue/test-utils'
<%_ } else { _%>
import { mount, createLocalVue } from '@vue/test-utils'
<%_ } _%>
<%_ if (!rootOptions.bare) { _%>
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      <%_ if (isVue3) { _%>
      props: { msg }
      <%_ } else { _%>
      propsData: { msg }
      <%_ } _%>
    })
    expect(wrapper.text()).to.include(msg)
  })
})
<%_ } else { _%>
import App from '@/App.vue'
<%_ if (!hasRouter) { _%>

describe('App', () => {
  it('should work', () => {
    const wrapper = shallowMount(App)
    expect(wrapper.text()).to.include(`Welcome to Your Vue.js + TypeScript App`)
  })
})

<%_ } else {_%>
import VueRouter from 'vue-router'
import router from '@/router'

const localVue = createLocalVue()
localVue.use(VueRouter)

describe('App', () => {
  it('should render default route', () => {
    const wrapper = mount(App, {
      localVue,
      router
    })
    expect(wrapper.text()).to.include(`Welcome to Your Vue.js App`)
  })
})

<%_ } _%>
<%_ } _%>
<%_ } _%>