Back to Repositories

Validating TypeScript-ESLint Integration in Vue CLI

This test suite validates the integration between TypeScript and ESLint in Vue CLI projects, focusing on proper semicolon handling and code formatting. It ensures that the TypeScript plugin works correctly with ESLint configuration and maintains consistent code style across different file types.

Test Coverage Overview

The test suite covers essential TypeScript and ESLint integration scenarios in Vue CLI projects.

Key areas tested include:

Semicolon handling in TypeScript files
Script section formatting in Vue single-file components
ESLint auto-fixing functionality
Configuration compatibility between TypeScript and Prettier

Implementation Analysis

The testing approach uses Jest’s asynchronous testing capabilities to create and manipulate test projects dynamically. It implements a project creation utility from ‘@vue/cli-test-utils’ to simulate real-world Vue CLI project scenarios.

Technical patterns include:

Dynamic file content manipulation
Regex-based script section targeting
Automated linting verification
Content equality assertions

Technical Details

Testing tools and configuration:

Jest as the testing framework
Custom project creation utilities
ESLint with Prettier configuration
TypeScript plugin with class component support
60-second timeout for async operations

Best Practices Demonstrated

The test implementation showcases several testing best practices for plugin integration verification.

Notable practices include:

Isolated test project creation
Comprehensive file content verification
Explicit formatting rule testing
Clean setup and teardown
Focused test scope with clear assertions

vuejs/vue-cli

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

            
jest.setTimeout(60000)

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

test('should work', async () => {
  const project = await create('ts-eslint', {
    plugins: {
      '@vue/cli-plugin-eslint': {
        config: 'prettier'
      },
      '@vue/cli-plugin-typescript': {
        classComponent: true
      }
    }
  })
  const { read, write, run } = project
  const main = await read('src/main.ts')
  expect(main).toMatch(';')
  const app = await read('src/App.vue')
  expect(main).toMatch(';')
  // remove semicolons
  const updatedMain = main.replace(/;/g, '')
  await write('src/main.ts', updatedMain)
  // for Vue file, only remove semis in script section
  const updatedApp = app.replace(/<script(.|\n)*\/script>/, $ => {
    return $.replace(/;/g, '')
  })
  await write('src/App.vue', updatedApp)
  // lint
  await run('vue-cli-service lint')
  expect(await read('src/main.ts')).toMatch(';')

  const lintedApp = await read('src/App.vue')
  expect(lintedApp).toMatch(';')
  // test if ESLint is fixing vue files properly
  expect(lintedApp).toBe(app)
})