Back to Repositories

Testing Vue Template Compilation Features in dcloudio/uni-app

This test suite evaluates the Vue template compilation functionality in the uni-app framework, focusing on the transformation of view components and property bindings. It verifies the correct compilation of template code using Vue’s compiler-sfc package while incorporating uni-app specific compiler options.

Test Coverage Overview

The test suite provides targeted coverage for template compilation scenarios in uni-app.

Key areas tested include:

View component property binding compilation
Change event handler compilation
Integration with Vue compiler-sfc
Uni-app specific compiler options validation

Implementation Analysis

The testing approach utilizes Jest’s snapshot testing pattern to verify compiled template output. The implementation leverages Vue’s compiler-sfc package with custom uni-app compiler options, ensuring proper transformation of view components and their bindings.

Technical patterns include:

Modular test helper functions
Compiler configuration isolation
Snapshot-based assertion strategy

Technical Details

Testing tools and configuration:

Jest as the testing framework
@vue/compiler-sfc for template compilation
Custom compile and genCode utility functions
Snapshot testing for output verification
TypeScript for type-safe testing

Best Practices Demonstrated

The test suite exemplifies several testing best practices in compiler validation.

Notable practices include:

Isolated compiler configuration
Reusable test utilities
Snapshot testing for complex output
Clear test case organization
Type-safe testing approach

dcloudio/uni-app

packages/uni-app-vite/__tests__/vue/compiler.spec.ts

            
import { compileTemplate } from '@vue/compiler-sfc'
import { uniOptions } from '../../src/plugin/uni/index'
const { compilerOptions } = uniOptions('vue')!
const filename = 'foo.vue'

function compile(source: string) {
  return compileTemplate({
    source,
    filename,
    id: filename,
    compilerOptions: {
      ...compilerOptions,
    },
  })
}

function genCode(source: string) {
  return compile(source).code
}

const codes = [
  `<view :prop="options" :change:prop="renderScript.updateOptions"/>`,
]

describe('app-vue: compiler', () => {
  codes.forEach((code) => {
    test(code, () => {
      expect(genCode(code)).toMatchSnapshot()
    })
  })
})