Back to Repositories

Validating ESLint Configuration for Vue 3 in vue-cli

This test suite validates ESLint configuration and functionality specifically for Vue 3 projects within the Vue CLI ecosystem. It focuses on verifying proper ESLint setup and fragment support in Vue 3 templates.

Test Coverage Overview

The test suite covers essential Vue 3 ESLint configuration verification and fragment syntax validation.

Validates base ESLint configuration for Vue 3 projects
Tests fragment syntax support in Vue 3 templates
Verifies proper script configuration and lint command setup

Implementation Analysis

The testing approach utilizes Jest for running unit tests with Vue CLI’s test utilities. Tests implement project generation and validation patterns specific to Vue 3 configuration.

Key testing patterns include:

Plugin generation testing using generateWithPlugin utility
Project creation testing using createUpgradableProject utility
Template syntax validation through actual file writing and linting

Technical Details

Testing infrastructure includes:

Jest as the testing framework
Vue CLI test utilities for project generation
ESLint configuration validation
Custom timeout configuration (300000ms)
File system operations for template testing

Best Practices Demonstrated

The test suite demonstrates several testing best practices for plugin development.

Isolated test environments for each test case
Comprehensive configuration validation
Real-world scenario testing with actual file content
Proper async/await usage for asynchronous operations
Clear test case isolation and purpose definition

vuejs/vue-cli

packages/@vue/cli-plugin-eslint/__tests__/eslintVue3.spec.js

            
jest.setTimeout(300000)

const generateWithPlugin = require('@vue/cli-test-utils/generateWithPlugin')
const createOutside = require('@vue/cli-test-utils/createUpgradableProject')

test('Vue 3 base', async () => {
  const { pkg } = await generateWithPlugin([
    {
      id: '@vue/cli-service',
      apply: require('@vue/cli-service/generator'),
      options: {
        vueVersion: '3'
      }
    },
    {
      id: '@vue/cli-plugineslint',
      apply: require('../generator'),
      options: {}
    }
  ])

  expect(pkg.scripts.lint).toBeTruthy()
  expect(pkg.eslintConfig.extends).toEqual([
    'plugin:vue/vue3-essential', 'eslint:recommended'
  ])
})

test('Should allow fragments in Vue 3 projects', async () => {
  const { write, run } = await createOutside('eslint-vue3-fragment', {
    vueVersion: '3',
    plugins: {
      '@vue/cli-plugin-eslint': {}
    }
  })
  await write('src/App.vue', `<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
`)

  await run('vue-cli-service lint')
})