Back to Repositories

Testing WXS and RenderJS Parsing Implementation in dcloudio/uni-app

This test suite validates the parsing functionality for WXS (WeiXin Script) and RenderJS code within uni-app components. It focuses on ensuring proper handling of script modules and their integration within Vue template structures.

Test Coverage Overview

The test coverage focuses on parsing both WXS and RenderJS code blocks within Vue template files.

Tests parsing of script modules with different lang attributes (wxs, renderjs)
Verifies correct handling of template, script, and style sections
Validates module naming and export structures

Implementation Analysis

The testing approach utilizes Jest’s snapshot testing to verify parsing outcomes.

Key implementation patterns include:

Chained parsing functions (parseVue → parseWxsNodes → parseWxsCode)
Modular test structure separating template and script concerns
Consistent validation of component structure integrity

Technical Details

Testing infrastructure includes:

Jest as the primary testing framework
Custom parsing utilities from uni-cli-shared
Snapshot testing for output validation
TypeScript for type-safe testing implementation

Best Practices Demonstrated

The test suite exemplifies several testing best practices:

Isolated test cases for different script types
Comprehensive validation of component structure
Clear separation of concerns between parsing steps
Effective use of snapshot testing for complex outputs

dcloudio/uni-app

packages/uni-cli-shared/__tests__/wxs.spec.ts

            
import { parseVue } from '../src/vite'
import { parseWxsCode, parseWxsNodes } from '../src/vue'

describe('wxs', () => {
  test('parseWxsCode', () => {
    const renderjsCode = `<template><view></view><view></view></template>
  <script>
  export default {}
  </script>
  <script lang="renderjs" module="echarts">
  export default{
      mounted(){
          console.log('mounted')
      }
  }
  </script>
  <style>
  .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  </style>
  `
    expect(
      parseWxsCode(parseWxsNodes(parseVue(renderjsCode, [])), renderjsCode)
    ).toMatchSnapshot()
    const wxsCode = `<template><view></view><view></view></template>
    <script>
    export default {}
    </script>
    <script lang="wxs" module="echarts">
    export default{
        mounted(){
            console.log('mounted')
        }
    }
    </script>
    <style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    </style>
    `
    expect(
      parseWxsCode(parseWxsNodes(parseVue(wxsCode, [])), wxsCode)
    ).toMatchSnapshot()
  })
})