Back to Repositories

Testing Vue CLI Jest Plugin Configuration in vuejs/vue-cli

This test suite validates the Vue CLI Jest plugin integration and configuration capabilities. It covers essential functionality including basic Jest setup, custom test matching, TypeScript support, and ESLint integration within Vue.js projects.

Test Coverage Overview

The test suite provides comprehensive coverage of the Vue CLI Jest plugin functionality.

Key areas tested include:

Basic Jest setup and execution
Custom test match configurations in package.json and jest.config.js
Babel-less testing capabilities
TypeScript and TSX component testing
ESLint integration verification

Implementation Analysis

The testing approach employs the @vue/cli-test-utils createTestProject utility to simulate real-world Vue CLI project scenarios.

Notable patterns include:

Async/await test structure for project creation and execution
Configuration validation through file system operations
Error case handling for missing test matches
Component mounting and prop verification for TSX

Technical Details

Testing tools and configuration:

Jest as the primary test runner
@vue/test-utils for component testing
Custom timeout configuration (300000ms)
Coverage reporting capabilities
TypeScript and Babel integration
ESLint configuration validation

Best Practices Demonstrated

The test suite exemplifies strong testing practices through isolation and thorough validation.

Notable practices include:

Isolated test cases with clear objectives
Comprehensive configuration testing
Error case handling and validation
Cross-plugin integration testing
Coverage collection implementation

vuejs/vue-cli

packages/@vue/cli-plugin-unit-jest/__tests__/jestPlugin.spec.js

            
jest.setTimeout(300000)

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

test('should work', async () => {
  const project = await create('unit-jest', {
    plugins: {
      '@vue/cli-plugin-babel': {},
      '@vue/cli-plugin-unit-jest': {}
    }
  })
  await project.run(`vue-cli-service test:unit`)
})

test('should respect jest testMatch config', async () => {
  const project = await create('unit-jest-package.json', {
    plugins: {
      '@vue/cli-plugin-babel': {},
      '@vue/cli-plugin-unit-jest': {}
    }
  })
  const config = JSON.parse(await project.read('package.json'))
  config.jest.testMatch = ['custom-test-directory/my.spec.js']

  await project.write('package.json', JSON.stringify(config))

  let result
  try {
    await project.run(`vue-cli-service test:unit`)
  } catch (e) {
    result = e
  }
  expect(result.stdout).toMatch('testMatch: custom-test-directory/my.spec.js')
  expect(result.stdout).toMatch('No tests found')
})

test('should respect jest.config.js testMatch config', async () => {
  const project = await create('unit-jest-jest.config.js', {
    plugins: {
      '@vue/cli-plugin-babel': {},
      '@vue/cli-plugin-unit-jest': {}
    },
    useConfigFiles: true
  })
  await project.write('jest.config.js', `
  module.exports = ${JSON.stringify({
    testMatch: ['custom-test-directory/my.spec.js']
  })}
  `)

  let result
  try {
    await project.run(`vue-cli-service test:unit`)
  } catch (e) {
    result = e
  }
  expect(result.stdout).toMatch('testMatch: custom-test-directory/my.spec.js')
  expect(result.stdout).toMatch('No tests found')
})

test('should work without Babel', async () => {
  const project = await create('jest-without-babel', {
    plugins: {
      '@vue/cli-plugin-unit-jest': {}
    },
    useConfigFiles: true
  })
  await project.run(`vue-cli-service test:unit`)

  await project.run(`vue-cli-service test:unit --coverage --collectCoverageFrom="src/**/*.{js,vue}"`)
  const appCoverage = await project.read('coverage/lcov-report/src/App.vue.html')
  expect(appCoverage).toBeTruthy()
})

test('should work with tsx', async () => {
  const { write, run } = await create('jest-with-tsx', {
    plugins: {
      '@vue/cli-plugin-babel': {},
      '@vue/cli-plugin-typescript': {
        useTsWithBabel: true,
        classComponent: true
      },
      '@vue/cli-plugin-unit-jest': {}
    },
    useConfigFiles: true
  })

  await write('src/components/HelloWorld.tsx', `
  import { Component, Prop, Vue } from 'vue-property-decorator';

  @Component
  export default class HelloWorld extends Vue {
    @Prop() private msg!: string;

    render () {
      return <div>{this.msg}</div>
    }
  }
  `)

  await write('tests/unit/example.spec.ts', `
  import { shallowMount } from '@vue/test-utils'
  import MyComponent from '@/components/HelloWorld'

  describe('HelloWorld.tsx', () => {
    it('renders props.msg when passed', () => {
      const msg = 'new message'
      const wrapper = shallowMount(MyComponent, {
        propsData: { msg }
      })
      expect(wrapper.text()).toMatch(msg)
    })
  })
  `)

  await run(`vue-cli-service test:unit`)
})

test('should correctly configured eslint', async () => {
  const project = await create('unit-jest-eslint', {
    plugins: {
      '@vue/cli-plugin-eslint': {},
      '@vue/cli-plugin-unit-jest': {}
    }
  })
  await project.run(`vue-cli-service lint`)
})