or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

command-registration.mdindex.mdjest-presets.mdproject-generation.mdui-integration.md
tile.json

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.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/cli-plugin-unit-jest@4.5.x

To install, run

npx @tessl/cli install tessl/npm-vue--cli-plugin-unit-jest@4.5.0

index.mddocs/

@vue/cli-plugin-unit-jest

A Vue CLI plugin that provides comprehensive Jest-based unit testing capabilities for Vue.js applications. This plugin seamlessly integrates with the Vue CLI ecosystem, automatically configuring Jest with Vue-specific settings and providing the test:unit command for running tests with optimal support for Single File Components, TypeScript, and modern JavaScript features.

Package Information

  • Package Name: @vue/cli-plugin-unit-jest
  • Package Type: npm (Vue CLI plugin)
  • Language: JavaScript
  • Installation: vue add unit-jest (within Vue CLI project)

Core Imports

The plugin is primarily accessed through Vue CLI commands rather than direct imports, but it provides several Jest preset configurations:

// Default Jest preset (for projects with Babel)
module.exports = require('@vue/cli-plugin-unit-jest');
// No-Babel preset
module.exports = require('@vue/cli-plugin-unit-jest/presets/no-babel');
// TypeScript preset
module.exports = require('@vue/cli-plugin-unit-jest/presets/typescript');
// TypeScript with Babel preset
module.exports = require('@vue/cli-plugin-unit-jest/presets/typescript-and-babel');

Basic Usage

After installing the plugin, it provides a test:unit command that can be run through Vue CLI service:

# Run tests
vue-cli-service test:unit

# Run tests in watch mode
vue-cli-service test:unit --watch

# Run tests with coverage
vue-cli-service test:unit --coverage

# Run specific test files
vue-cli-service test:unit tests/unit/MyComponent.spec.js

Architecture

The @vue/cli-plugin-unit-jest plugin is structured around several key components:

  • Plugin Registration: Main plugin function that registers the test:unit command with Vue CLI service
  • Jest Presets: Multiple pre-configured Jest configurations for different project setups (Babel, TypeScript, no-Babel)
  • Project Generator: Generator functions that set up test configuration during project creation
  • UI Integration: Vue CLI UI integration for graphical test management
  • Environment Configuration: Automatic environment variable setup for optimal Babel and Jest integration

Capabilities

Command Registration

Core Vue CLI plugin functionality that registers the test:unit command and integrates with the CLI service infrastructure.

function plugin(api: PluginAPI): void;

interface PluginAPI {
  registerCommand(
    name: string,
    options: CommandOptions,
    handler: CommandHandler
  ): void;
}

interface CommandOptions {
  description: string;
  usage: string;
  options: Record<string, string>;
  details: string;
}

type CommandHandler = (args: any, rawArgv: string[]) => void;

Command Registration

Jest Presets

Pre-configured Jest settings for different project configurations, handling Vue Single File Components, TypeScript, Babel transpilation, and asset transformation.

interface JestPreset {
  moduleFileExtensions: string[];
  transform: Record<string, string>;
  transformIgnorePatterns: string[];
  moduleNameMapper: Record<string, string>;
  testEnvironment: string;
  snapshotSerializers: string[];
  testMatch: string[];
  testURL: string;
  watchPlugins: string[];
}

Jest Presets

Project Generation

Generator functions that set up test configuration, dependencies, and example files when the plugin is added to a Vue CLI project.

function generator(
  api: GeneratorAPI,
  options: any,
  rootOptions: any,
  invoking: boolean
): void;

function applyESLint(api: GeneratorAPI): void;

function applyTS(api: GeneratorAPI, invoking: boolean): void;

Project Generation

UI Integration

Vue CLI UI integration that provides a graphical interface for running tests with interactive configuration options.

function uiPlugin(api: UIPluginAPI): void;

interface TaskDescription {
  match: RegExp;
  description: string;
  link: string;
  prompts: TaskPrompt[];
  onBeforeRun: (context: TaskContext) => void;
}

UI Integration

Types

interface GeneratorAPI {
  render(templateDir: string, templateData?: any): void;
  extendPackage(packageAdditions: any): void;
  hasPlugin(pluginName: string): boolean;
}

interface UIPluginAPI {
  describeTask(taskDescription: TaskDescription): void;
}

interface TaskPrompt {
  name: string;
  type: string;
  description: string;
  when?: (answers: any) => boolean;
}

interface TaskContext {
  answers: any;
  args: string[];
}