Back to Repositories

Validating TypeScript-Babel Integration in vue-cli

This test suite validates the integration of TypeScript with Babel in Vue CLI, focusing on webpack loader configurations and TSX support. It ensures proper compilation and build processes for TypeScript components in Vue applications.

Test Coverage Overview

The test suite covers critical aspects of TypeScript and Babel integration in Vue CLI:

Webpack loader configuration verification
TypeScript compilation with Babel integration
TSX component building and rendering
Service initialization and configuration resolution

Implementation Analysis

The testing approach employs Jest for unit testing, with a focus on service configuration and build processes. It utilizes Vue CLI’s test utilities for project creation and verification, implementing both direct loader checks and end-to-end build scenarios.

Key patterns include service initialization, webpack configuration resolution, and TSX component compilation validation.

Technical Details

Testing tools and configuration:

Jest as the primary testing framework
Vue CLI service for webpack configuration
Cache-loader, babel-loader, and ts-loader verification
Custom test utilities for project creation
TSX component rendering validation

Best Practices Demonstrated

The test suite demonstrates excellent testing practices through isolated component testing, proper service initialization, and comprehensive loader configuration validation. It implements proper async/await patterns, clear test case separation, and thorough assertion checking for build processes.

Notable practices include proper timeout configuration, modular test helper usage, and explicit type checking for TSX components.

vuejs/vue-cli

packages/@vue/cli-plugin-typescript/__tests__/tsPluginBabel.spec.js

            
jest.setTimeout(30000)

const Service = require('@vue/cli-service/lib/Service')
const create = require('@vue/cli-test-utils/createTestProject')
const { assertServe, assertBuild } = require('./tsPlugin.helper')

test('using correct loader', async () => {
  const service = new Service('/', {
    pkg: {},
    plugins: [
      { id: '@vue/cli-plugin-typescript', apply: require('../index') },
      { id: '@vue/cli-plugin-babel', apply: require('@vue/cli-plugin-babel') }
    ]
  })

  await service.init()
  const config = service.resolveWebpackConfig()
  // eslint-disable-next-line no-shadow
  const rule = config.module.rules.find(rule => rule.test.test('foo.ts'))
  expect(rule.use[0].loader).toMatch(require.resolve('cache-loader'))
  expect(rule.use[1].loader).toMatch(require.resolve('babel-loader'))
  expect(rule.use[2].loader).toMatch(require.resolve('ts-loader'))
})

const creatorOptions = {
  plugins: {
    '@vue/cli-plugin-typescript': {},
    '@vue/cli-plugin-babel': {}
  }
}

assertServe('ts-babel-serve', creatorOptions)
assertBuild('ts-babel-build', creatorOptions)

test('tsx-build', async () => {
  const project = await create('tsx', creatorOptions)
  await project.write('src/components/HelloWorld.vue', `
  <script lang="tsx">
  import Vue, { CreateElement } from 'vue'
  import Component from 'vue-class-component'

  @Component
  export default class World extends Vue {
    render (h: CreateElement) {
      return (
        <p>This is rendered via TSX</p>
      )
    }
  }
  </script>
  `)

  const { stdout } = await project.run('vue-cli-service build')
  expect(stdout).toMatch('Build complete.')
})