0
# @vue/cli-plugin-unit-jest
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @vue/cli-plugin-unit-jest
7
- **Package Type**: npm (Vue CLI plugin)
8
- **Language**: JavaScript
9
- **Installation**: `vue add unit-jest` (within Vue CLI project)
10

11
## Core Imports
12

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

15
```javascript
16
// Default Jest preset (for projects with Babel)
17
module.exports = require('@vue/cli-plugin-unit-jest');
18
```
19

20
```javascript
21
// No-Babel preset
22
module.exports = require('@vue/cli-plugin-unit-jest/presets/no-babel');
23
```
24

25
```javascript
26
// TypeScript preset
27
module.exports = require('@vue/cli-plugin-unit-jest/presets/typescript');
28
```
29

30
```javascript
31
// TypeScript with Babel preset
32
module.exports = require('@vue/cli-plugin-unit-jest/presets/typescript-and-babel');
33
```
34

35
## Basic Usage
36

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

39
```bash
40
# Run tests
41
vue-cli-service test:unit
42

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

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

49
# Run specific test files
50
vue-cli-service test:unit tests/unit/MyComponent.spec.js
51
```
52

53
## Architecture
54

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

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

63
## Capabilities
64

65
### Command Registration
66

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

69
```javascript { .api }
70
function plugin(api: PluginAPI): void;
71

72
interface PluginAPI {
73
  registerCommand(
74
    name: string,
75
    options: CommandOptions,
76
    handler: CommandHandler
77
  ): void;
78
}
79

80
interface CommandOptions {
81
  description: string;
82
  usage: string;
83
  options: Record<string, string>;
84
  details: string;
85
}
86

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

90
[Command Registration](./command-registration.md)
91

92
### Jest Presets
93

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

96
```javascript { .api }
97
interface JestPreset {
98
  moduleFileExtensions: string[];
99
  transform: Record<string, string>;
100
  transformIgnorePatterns: string[];
101
  moduleNameMapper: Record<string, string>;
102
  testEnvironment: string;
103
  snapshotSerializers: string[];
104
  testMatch: string[];
105
  testURL: string;
106
  watchPlugins: string[];
107
}
108
```
109

110
[Jest Presets](./jest-presets.md)
111

112
### Project Generation
113

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

116
```javascript { .api }
117
function generator(
118
  api: GeneratorAPI,
119
  options: any,
120
  rootOptions: any,
121
  invoking: boolean
122
): void;
123

124
function applyESLint(api: GeneratorAPI): void;
125

126
function applyTS(api: GeneratorAPI, invoking: boolean): void;
127
```
128

129
[Project Generation](./project-generation.md)
130

131
### UI Integration
132

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

135
```javascript { .api }
136
function uiPlugin(api: UIPluginAPI): void;
137

138
interface TaskDescription {
139
  match: RegExp;
140
  description: string;
141
  link: string;
142
  prompts: TaskPrompt[];
143
  onBeforeRun: (context: TaskContext) => void;
144
}
145
```
146

147
[UI Integration](./ui-integration.md)
148

149
## Types
150

151
```javascript { .api }
152
interface GeneratorAPI {
153
  render(templateDir: string, templateData?: any): void;
154
  extendPackage(packageAdditions: any): void;
155
  hasPlugin(pluginName: string): boolean;
156
}
157

158
interface UIPluginAPI {
159
  describeTask(taskDescription: TaskDescription): void;
160
}
161

162
interface TaskPrompt {
163
  name: string;
164
  type: string;
165
  description: string;
166
  when?: (answers: any) => boolean;
167
}
168

169
interface TaskContext {
170
  answers: any;
171
  args: string[];
172
}
173
```