Back to Repositories

Testing Jest Generator Implementation in vue-cli

This test suite validates the Jest unit test generator functionality in Vue CLI, ensuring proper test file generation across different project configurations. It verifies the generator’s behavior with TypeScript integration, bare Vue.js applications, and router implementations.

Test Coverage Overview

The test suite provides comprehensive coverage of the Jest generator’s capabilities across multiple Vue.js project configurations.

Base configuration testing with babel and eslint integration
TypeScript support verification
Bare Vue.js application testing
Router integration scenarios
Combined TypeScript and router configurations

Implementation Analysis

The testing approach utilizes Vue CLI’s test utilities for plugin generation and project creation. It implements systematic verification of generated test files and package configurations.

Uses generateWithPlugin utility for plugin testing
Validates package.json configurations
Checks generated test file contents and syntax
Verifies TypeScript configuration updates

Technical Details

Testing Framework: Jest
Core Dependencies: @vue/test-utils
Test Utilities: @vue/cli-test-utils
Configuration: tsconfig.json for TypeScript integration
Test File Extensions: .spec.js and .spec.ts

Best Practices Demonstrated

The test suite exemplifies robust testing practices for plugin generators, ensuring compatibility across different project setups.

Isolated plugin testing
Mock plugin implementation
Configuration validation
Cross-feature integration testing
TypeScript type definition verification

vuejs/vue-cli

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

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

test('base', async () => {
  const { pkg, files } = await generateWithPlugin([
    {
      id: 'unit-jest',
      apply: require('../generator'),
      options: {}
    },
    // mock presence of the babel & eslint plugin
    {
      id: 'babel',
      apply: () => {},
      options: {}
    },
    {
      id: 'eslint',
      apply: () => {},
      options: {}
    }
  ])

  expect(pkg.scripts['test:unit']).toBe('vue-cli-service test:unit')
  expect(pkg.devDependencies).toHaveProperty('@vue/test-utils')

  const spec = files['tests/unit/example.spec.js']
  expect(spec).toMatch(`expect(wrapper.text()).toMatch(msg)`)
})

test('with TS', async () => {
  const { files } = await generateWithPlugin([
    {
      id: 'unit-jest',
      apply: require('../generator'),
      options: {}
    },
    // mock presence of the ts plugin
    {
      id: 'typescript',
      apply: () => {},
      options: {}
    }
  ])

  const spec = files['tests/unit/example.spec.ts']
  expect(spec).toMatch(`expect(wrapper.text()).toMatch(msg)`)
})

test('bare', async () => {
  const { files } = await generateWithPlugin([
    {
      id: 'unit-jest',
      apply: require('../generator'),
      options: {}
    },
    {
      id: '@vue/cli-service',
      apply: () => {},
      options: { bare: true }
    }
  ])

  const spec = files['tests/unit/example.spec.js']
  expect(spec).toMatch(`const wrapper = shallowMount(App)`)
  expect(spec).toMatch(`expect(wrapper.text()).toMatch(\`Welcome to Your Vue.js App\`)`)
})

test('TS + bare', async () => {
  const { files } = await generateWithPlugin([
    {
      id: 'unit-jest',
      apply: require('../generator'),
      options: {}
    },
    {
      id: 'typescript',
      apply: () => {},
      options: {}
    },
    {
      id: '@vue/cli-service',
      apply: () => {},
      options: { bare: true }
    }
  ])

  const spec = files['tests/unit/example.spec.ts']
  expect(spec).toMatch(`const wrapper = shallowMount(App)`)
  expect(spec).toMatch(`expect(wrapper.text()).toMatch(\`Welcome to Your Vue.js + TypeScript App\`)`)
})

test('bare + router', async () => {
  const { files } = await generateWithPlugin([
    {
      id: 'unit-jest',
      apply: require('../generator'),
      options: {}
    },
    {
      id: '@vue/cli-service',
      apply: () => {},
      options: { bare: true }
    },
    {
      id: 'router',
      apply: () => {},
      options: {}
    }
  ])

  const spec = files['tests/unit/example.spec.js']
  expect(spec).toMatch(`const wrapper = mount(App,`)
  expect(spec).toMatch(`expect(wrapper.text()).toMatch(\`Welcome to Your Vue.js App\`)`)
})

test('TS + bare + router', async () => {
  const { files } = await generateWithPlugin([
    {
      id: 'unit-jest',
      apply: require('../generator'),
      options: {}
    },
    {
      id: 'typescript',
      apply: () => {},
      options: {}
    },
    {
      id: '@vue/cli-service',
      apply: () => {},
      options: { bare: true }
    },
    {
      id: 'router',
      apply: () => {},
      options: {}
    }
  ])

  const spec = files['tests/unit/example.spec.ts']
  expect(spec).toMatch(`const wrapper = mount(App,`)
  expect(spec).toMatch(`expect(wrapper.text()).toMatch(\`Welcome to Your Vue.js App\`)`)
})

test('add types to existing tsconfig.json', async () => {
  const { dir, read, write } = await create('unit-jest-tsconfig', {
    plugins: {
      '@vue/cli-plugin-typescript': {},
      '@vue/cli-plugin-unit-jest': {}
    }
  })
  await write('tsconfig.json', JSON.stringify({ compilerOptions: { types: ['some-type'] } }))

  const invoke = require('@vue/cli/lib/invoke')
  await invoke('unit-jest', {}, dir)

  const tsconfig = await read('tsconfig.json')
  expect(tsconfig).toMatch(/\r?\n$/)
  expect(JSON.parse(tsconfig).compilerOptions.types).toEqual(['some-type', 'jest'])
}, 30000)