Back to Repositories

Testing v-memo Directive Transformations in dcloudio/uni-app

This test suite evaluates the v-memo directive transformation functionality in the uni-app UTS Android compiler. It verifies the correct compilation and transformation of v-memo directives across different component scenarios and structural directives like v-if and v-for.

Test Coverage Overview

The test suite provides comprehensive coverage of v-memo directive implementations across various Vue component scenarios.

Tests v-memo on root elements, normal elements, and components
Validates integration with v-if/v-else conditional rendering
Verifies v-memo behavior with v-for loops on both regular elements and template tags
Covers key edge cases in directive combinations

Implementation Analysis

The testing approach utilizes Jest’s snapshot testing pattern to verify compiler output consistency. The implementation leverages a custom compile helper function that wraps the base compiler with standardized configuration options.

Uses module mode compilation
Implements prefixed identifiers
Maintains consistent class naming conventions
Validates compiler transformations through snapshot comparisons

Technical Details

Testing infrastructure leverages:

Jest as the primary testing framework
Custom compiler configuration with module mode
Snapshot testing for output validation
TypeScript for type-safe test definitions
Base compiler from uni-app UTS Android plugin

Best Practices Demonstrated

The test suite exemplifies several testing best practices for compiler transformations.

Isolated test cases for each directive scenario
Consistent test structure and naming
Comprehensive coverage of component variations
Effective use of snapshot testing for transformation validation
Clear separation of test setup and assertions

dcloudio/uni-app

packages/uni-app-uts/__tests__/android/transforms/vMemo.spec.ts

            
import { compile as baseCompile } from '../../../src/plugins/android/uvue/compiler/index'
describe('compiler: v-memo transform', () => {
  function compile(content: string) {
    return baseCompile(`<view>${content}</view>`, {
      mode: 'module',
      prefixIdentifiers: true,
      className: 'PagesIndexIndex',
    }).code
  }

  test('on root element', () => {
    expect(
      baseCompile(`<view v-memo="[x]"></view>`, {
        mode: 'module',
        prefixIdentifiers: true,
        className: 'PagesIndexIndex',
      }).code
    ).toMatchSnapshot()
  })

  test('on normal element', () => {
    expect(compile(`<view v-memo="[x]"></view>`)).toMatchSnapshot()
  })

  test('on component', () => {
    expect(compile(`<Comp v-memo="[x]"></Comp>`)).toMatchSnapshot()
  })

  test('on v-if', () => {
    expect(
      compile(
        `<view v-if="ok" v-memo="[x]"><text>foo</text>bar</view>
        <Comp v-else v-memo="[x]"></Comp>`
      )
    ).toMatchSnapshot()
  })

  test('on v-for', () => {
    expect(
      compile(
        `<view v-for="{ x, y } in list" :key="x" v-memo="[x, y === z]">
          <text>foobar</text>
        </view>`
      )
    ).toMatchSnapshot()
  })

  test('on template v-for', () => {
    expect(
      compile(
        `<template v-for="{ x, y } in list" :key="x" v-memo="[x, y === z]">
          <text>foobar</text>
        </template>`
      )
    ).toMatchSnapshot()
  })
})