Back to Repositories

Testing Cypress E2E Integration and Configuration in Vue CLI

This test suite validates the Cypress E2E testing integration within Vue CLI projects, covering both JavaScript and TypeScript implementations. It ensures proper configuration and execution of end-to-end tests across different development environments.

Test Coverage Overview

The test suite comprehensively covers the integration of Cypress E2E testing in Vue CLI projects.

Basic JavaScript project setup and configuration
TypeScript project integration and compatibility
Environment-specific test execution (CI vs local)
Headless testing capabilities

Implementation Analysis

The testing approach utilizes Vue CLI’s test utilities to create and validate test projects. It implements conditional test execution based on environment variables and handles both JavaScript and TypeScript configurations.

Project creation with specific plugin combinations
Configuration file manipulation
Environment-aware test execution

Technical Details

Jest as the test runner with customized timeouts
Vue CLI test utilities for project creation
Cypress configuration management
Plugin integration: babel, eslint, typescript
CI/CD considerations for Appveyor

Best Practices Demonstrated

The test suite exemplifies robust E2E testing practices by incorporating environment awareness and proper configuration management.

Dynamic timeout configuration for CI environments
Flexible test execution modes (headless vs interactive)
Clean configuration handling
Cross-framework compatibility testing

vuejs/vue-cli

packages/@vue/cli-plugin-e2e-cypress/__tests__/cypressPlugin.spec.js

            
jest.setTimeout(process.env.APPVEYOR ? 120000 : 60000)

const create = require('@vue/cli-test-utils/createTestProject')

test('should work', async () => {
  const project = await create('e2e-cypress', {
    plugins: {
      '@vue/cli-plugin-babel': {},
      '@vue/cli-plugin-e2e-cypress': {},
      '@vue/cli-plugin-eslint': {
        config: 'airbnb',
        lintOn: 'save'
      }
    }
  })

  const config = JSON.parse(await project.read('cypress.json'))
  config.video = false
  await project.write('cypress.json', JSON.stringify(config))

  if (!process.env.CI) {
    await project.run(`vue-cli-service test:e2e`)
  } else if (!process.env.APPVEYOR) {
    await project.run(`vue-cli-service test:e2e --headless`)
  }
})

test('should work with TS', async () => {
  const project = await create('e2e-cypress-ts', {
    plugins: {
      '@vue/cli-plugin-typescript': {
        'classComponent': true,
        'lintOn': ['save']
      },
      '@vue/cli-plugin-e2e-cypress': {}
    }
  })

  const config = JSON.parse(await project.read('cypress.json'))
  config.video = false
  await project.write('cypress.json', JSON.stringify(config))

  if (!process.env.CI) {
    await project.run(`vue-cli-service test:e2e`)
  } else if (!process.env.APPVEYOR) {
    await project.run(`vue-cli-service test:e2e --headless`)
  }
})