Back to Repositories

Testing Vue 3 Application Serving Capabilities in vue-cli

This test suite validates the serving functionality of Vue 3 applications within the Vue CLI ecosystem. It ensures proper application initialization, hot reload capabilities, and Vue 3 runtime integration.

Test Coverage Overview

The test suite provides comprehensive coverage of Vue 3 application serving capabilities.

Key areas tested include:

Initial application rendering and mounting
Vue 3 runtime presence verification
Hot module replacement (HMR) functionality
Content update propagation

Implementation Analysis

The testing approach utilizes Jest and Puppeteer for end-to-end validation of Vue 3 serving functionality. The implementation leverages the createUpgradableProject utility for test environment setup and employs async/await patterns for handling asynchronous operations.

Notable technical aspects include:

Custom serve helper integration with Puppeteer
Dynamic content modification testing
Timeout handling for slower CI environments

Technical Details

Testing infrastructure includes:

Jest as the test runner
Puppeteer for browser automation
Vue CLI test utilities
Custom serve helpers for process management

Configuration highlights:

Extended timeout (300000ms)
Vue 3 preset configuration
AppVeyor-specific error handling

Best Practices Demonstrated

The test implementation showcases several testing best practices for Vue applications.

Notable practices include:

Proper test isolation and cleanup
Robust error handling and environment-specific accommodations
Efficient async operation management
Clear test case organization and documentation

vuejs/vue-cli

packages/@vue/cli-service/__tests__/serveVue3.spec.js

            
const { defaultPreset } = require('@vue/cli/lib/options')
// needs to be outside the workspace, so we reuse the createUpgradableProject functionality here
const create = require('@vue/cli-test-utils/createUpgradableProject')
const serve = require('@vue/cli-test-utils/serveWithPuppeteer')

jest.setTimeout(300000)

test('serve with Vue 3', async () => {
  const project = await create('e2e-serve-vue-3', Object.assign({}, defaultPreset, { vueVersion: '3' }))

  await serve(
    () => project.run('yarn serve'),
    async ({ page, nextUpdate, helpers }) => {
      const msg = `Welcome to Your Vue.js App`
      expect(await helpers.getText('h1')).toMatch(msg)
      expect(await page.evaluate(() => window.__VUE__)).toBeDefined()

      // test hot reload
      const file = await project.read(`src/App.vue`)
      project.write(`src/App.vue`, file.replace(msg, `Updated`))
      await nextUpdate() // wait for child stdout update signal
      try {
        await page.waitForFunction(selector => {
          const el = document.querySelector(selector)
          return el && el.textContent.includes('Updated')
        }, { timeout: 60000 }, 'h1')
      } catch (e) {
        if (process.env.APPVEYOR && e.message.match('timeout')) {
          // AppVeyor VM is so slow that there's a large chance this test cases will time out,
          // we have to tolerate such failures.
          console.error(e)
        } else {
          throw e
        }
      }
    }
  )
})