CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue--cli-plugin-unit-jest

A Vue CLI plugin that adds Jest unit testing capabilities to Vue.js projects, providing seamless integration with the Vue CLI service through the 'test:unit' command.

—

Pending
Overview
Eval results
Files

jest-presets.mddocs/

Jest Presets

The Jest presets capability provides pre-configured Jest settings for different project configurations, handling Vue Single File Components, TypeScript, Babel transpilation, and asset transformation.

Capabilities

Default Preset

Standard Jest configuration for Vue projects with Babel support.

/**
 * Default Jest preset with Babel support
 * Located at: presets/default/jest-preset.js
 */
const defaultPreset: JestPreset;

Usage Example:

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest'
}

No-Babel Preset

Jest configuration for projects without Babel, using a custom ES module transformer.

/**
 * Jest preset for projects without Babel
 * Located at: presets/no-babel/jest-preset.js
 */
const noBabelPreset: JestPreset;

Usage Example:

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/no-babel'
}

TypeScript Preset

Jest configuration with TypeScript support using ts-jest.

/**
 * Jest preset for TypeScript projects
 * Located at: presets/typescript/jest-preset.js
 */
const typescriptPreset: JestPreset;

Usage Example:

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript'
}

TypeScript and Babel Preset

Combined TypeScript and Babel support for complex project configurations.

/**
 * Jest preset for TypeScript projects with Babel
 * Located at: presets/typescript-and-babel/jest-preset.js
 */
const typescriptBabelPreset: JestPreset;

Usage Example:

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
}

ES Module Transformer

Custom Babel transformer for handling ES modules in projects without Babel configuration.

/**
 * Custom Babel transformer for ES modules
 * Located at: presets/no-babel/esmoduleTransformer.js
 * Uses @babel/plugin-transform-modules-commonjs to convert ES modules to CommonJS
 */
const esmoduleTransformer: BabelTransformer;

Implementation:

const esmoduleTransformer = babelJest.createTransformer({
  plugins: ['@babel/plugin-transform-modules-commonjs'],
  babelrc: false,
  configFile: false
});

Preset Configuration Details

Common Configuration

All presets share these common configuration patterns:

interface JestPreset {
  /** File extensions that Jest should process */
  moduleFileExtensions: string[];
  /** Transformation rules for different file types */
  transform: Record<string, string>;
  /** Patterns for files that should not be transformed */
  transformIgnorePatterns: string[];
  /** Module path aliases (e.g., @ -> src) */
  moduleNameMapper: Record<string, string>;
  /** Test environment (jsdom for browser-like tests) */
  testEnvironment: string;
  /** Snapshot serializers for Vue components */
  snapshotSerializers: string[];
  /** Patterns to match test files */
  testMatch: string[];
  /** Base URL for tests */
  testURL: string;
  /** Jest watch mode plugins */
  watchPlugins: string[];
  /** Global configuration for transformers */
  globals?: Record<string, any>;
}

Default Preset Configuration

const defaultPresetConfig: JestPreset = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  transformIgnorePatterns: ['/node_modules/'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  testEnvironment: 'jest-environment-jsdom-fifteen',
  snapshotSerializers: ['jest-serializer-vue'],
  testMatch: [
    '**/tests/unit/**/*.spec.[jt]s?(x)',
    '**/__tests__/*.[jt]s?(x)'
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname'
  ]
};

TypeScript Extensions

TypeScript presets extend the default configuration using deepmerge:

const typescriptExtensions = {
  moduleFileExtensions: ['ts', 'tsx'], // Added to existing extensions
  transform: {
    '^.+\\.tsx?$': 'ts-jest' // TypeScript transformer
  }
};

TypeScript Preset Implementation:

const deepmerge = require('deepmerge')
const defaultPreset = require('../default/jest-preset')

module.exports = deepmerge(defaultPreset, {
  moduleFileExtensions: ['ts', 'tsx'],
  transform: {
    '^.+\\.tsx?$': require.resolve('ts-jest')
  }
})

Babel Integration

TypeScript with Babel preset enables Babel processing:

const typescriptBabelConfig = {
  globals: {
    'ts-jest': {
      babelConfig: true // Enable Babel in ts-jest
    }
  }
};

TypeScript with Babel Preset Implementation:

const deepmerge = require('deepmerge')
const defaultTsPreset = require('../typescript/jest-preset')

module.exports = deepmerge(defaultTsPreset, {
  globals: {
    'ts-jest': {
      babelConfig: true
    }
  }
})

No-Babel Configuration

No-Babel preset uses custom transformer and Vue-Jest configuration:

const noBabelConfig = {
  transform: {
    '^.+\\.jsx?$': './esmoduleTransformer' // Custom ES module transformer
  },
  globals: {
    'vue-jest': {
      babelConfig: {
        plugins: ['babel-plugin-transform-es2015-modules-commonjs']
      }
    }
  }
};

No-Babel Preset Implementation:

const deepmerge = require('deepmerge')
const defaultPreset = require('../default/jest-preset')

module.exports = deepmerge(defaultPreset, {
  transform: {
    '^.+\\.jsx?$': require.resolve('./esmoduleTransformer')
  },
  globals: {
    'vue-jest': {
      babelConfig: {
        plugins: ['babel-plugin-transform-es2015-modules-commonjs']
      }
    }
  }
})

File Transformation

Vue Single File Components

const vueTransform = {
  '^.+\\.vue$': 'vue-jest' // Process .vue files with vue-jest
};

Asset Stubbing

const assetTransform = {
  '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
};

JavaScript/TypeScript

const jsTransform = {
  '^.+\\.jsx?$': 'babel-jest', // JavaScript with Babel
  '^.+\\.tsx?$': 'ts-jest'     // TypeScript with ts-jest
};

Test File Patterns

const testPatterns = [
  '**/tests/unit/**/*.spec.[jt]s?(x)', // Dedicated test directories
  '**/__tests__/*.[jt]s?(x)'           // Co-located test files
];

These patterns match:

  • tests/unit/MyComponent.spec.js
  • tests/unit/utils/helpers.spec.ts
  • src/components/__tests__/MyComponent.js
  • src/utils/__tests__/helper.tsx

Preset Merging

All presets (except default) use deepmerge to combine configurations:

/**
 * Deep merge utility for combining Jest configurations
 * @param target - Base configuration object
 * @param source - Configuration to merge into target
 * @returns Merged configuration object
 */
function deepmerge<T>(target: T, source: Partial<T>): T;

Usage Pattern:

const deepmerge = require('deepmerge')
const basePreset = require('../default/jest-preset')

module.exports = deepmerge(basePreset, {
  // Additional or overriding configuration
})

Types

interface BabelTransformer {
  /** Create transformer with Babel configuration */
  createTransformer(config: BabelConfig): any;
}

interface BabelConfig {
  /** Babel plugins to apply */
  plugins: string[];
  /** Disable .babelrc file reading */
  babelrc: boolean;
  /** Disable babel.config.js file reading */
  configFile: boolean;
}

Install with Tessl CLI

npx tessl i tessl/npm-vue--cli-plugin-unit-jest

docs

command-registration.md

index.md

jest-presets.md

project-generation.md

ui-integration.md

tile.json