Gathering detailed insights and metrics for @vue/vue3-jest
Gathering detailed insights and metrics for @vue/vue3-jest
Gathering detailed insights and metrics for @vue/vue3-jest
Gathering detailed insights and metrics for @vue/vue3-jest
npm install @vue/vue3-jest
Typescript
Module System
Min. Node Version
JavaScript (73.03%)
Vue (23.67%)
TypeScript (2.05%)
SCSS (0.42%)
Less (0.3%)
Pug (0.16%)
Sass (0.14%)
HTML (0.13%)
CSS (0.07%)
Stylus (0.04%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
757 Stars
521 Commits
157 Forks
19 Watchers
17 Branches
139 Contributors
Updated on Jun 26, 2025
Latest Version
29.2.6
Package Id
@vue/vue3-jest@29.2.6
Unpacked Size
25.45 kB
Size
7.77 kB
File Count
17
Published on
Sep 06, 2023
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Jest transformer for Vue Single File Components.
Since we need to support a variety of Vue and Jest versions, vue-jest doesn't follow semantic versioning.
Vue version | Jest Version | npm Package | Branch |
---|---|---|---|
Vue 2 | Jest 26 and below | vue-jest@4 | |
Vue 3 | Jest 26 and below | vue-jest@5 | |
Vue 2 | Jest 27 and above | @vue/vue2-jest@27 | 27.x |
Vue 3 | Jest 27 and above | @vue/vue3-jest@27 | 27.x |
Vue 2 | Jest 28 and above | @vue/vue2-jest@28 | 28.x |
Vue 3 | Jest 28 and above | @vue/vue3-jest@28 | 28.x |
1# Vue 2 2npm install --save-dev @vue/vue2-jest@28 # (use the appropriate version) 3yarn add @vue/vue2-jest@28 --dev 4 5# Vue 3 6npm install --save-dev @vue/vue3-jest@28 # (use the appropriate version) 7yarn add @vue/vue3-jest@28 --dev
To use vue-jest
as a transformer for your .vue
files, map them to the appropriate vue-jest
module:
1{ 2 "jest": { 3 "transform": { 4 "^.+\\.vue$": "@vue/vue2-jest" // Update to match your installed version 5 } 6 } 7}
A full config will look like this.
1{ 2 "jest": { 3 "moduleFileExtensions": ["js", "json", "vue"], 4 "transform": { 5 "^.+\\.js$": "babel-jest", 6 "^.+\\.vue$": "@vue/vue2-jest" 7 } 8 } 9}
If you use jest > 24.0.0 and babel-jest make sure to install babel-core@bridge
1npm install --save-dev babel-core@bridge 2yarn add babel-core@bridge --dev
vue-jest compiles <script />
, <template />
, and <style />
blocks with supported lang
attributes into JavaScript that Jest can run.
lang="ts"
, lang="typescript"
)lang="coffee"
, lang="coffeescript"
)You can change the behavior of vue-jest
by using jest.globals
.
These options can be used to define Vue compiler options in @vue/vue3-jest
.
For example, to enable propsDestructureTransform
:
1globals: { 2 'vue-jest': { 3 compilerOptions: { 4 propsDestructureTransform: true 5 } 6 } 7}
or disable refTransform
(which is enabled by default):
1globals: { 2 'vue-jest': { 3 compilerOptions: { 4 refTransform: false 5 } 6 } 7}
A great feature of the Vue SFC compiler is that it can support custom blocks. You might want to use those blocks in your tests. To render out custom blocks for testing purposes, you'll need to write a transformer. Once you have your transformer, you'll add an entry to vue-jest's transform map. This is how vue-i18n's <i18n>
custom blocks are supported in unit tests.
A package.json
Example
1{ 2 "jest": { 3 "moduleFileExtensions": ["js", "json", "vue"], 4 "transform": { 5 "^.+\\.js$": "babel-jest", 6 "^.+\\.vue$": "@vue/vue2-jest" 7 }, 8 "globals": { 9 "vue-jest": { 10 "transform": { 11 "your-custom-block": "./custom-block-processor.js" 12 } 13 } 14 } 15 } 16}
Tip: Need programmatic configuration? Use the --config option in Jest CLI, and export a
.js
file
A jest.config.js
Example - If you're using a dedicated configuration file like you can reference and require your processor in the config file instead of using a file reference.
1module.exports = { 2 globals: { 3 'vue-jest': { 4 transform: { 5 'your-custom-block': require('./custom-block-processor') 6 } 7 } 8 } 9}
Processors must return an object with a "process" method, like so...
1module.exports = { 2 /** 3 * Process the content inside of a custom block and prepare it for execution in a testing environment 4 * @param {SFCCustomBlock[]} blocks All of the blocks matching your type, returned from `@vue/component-compiler-utils` 5 * @param {string} vueOptionsNamespace The internal namespace for a component's Vue Options in vue-jest 6 * @param {string} filename The SFC file being processed 7 * @param {Object} config The full Jest config 8 * @returns {string} The code to be output after processing all of the blocks matched by this type 9 */ 10 process({ blocks, vueOptionsNamespace, filename, config }) {} 11}
You can provide TemplateCompileOptions in templateCompiler
section like this:
1{ 2 "jest": { 3 "globals": { 4 "vue-jest": { 5 "templateCompiler": { 6 "transpileOptions": { 7 "transforms": { 8 "dangerousTaggedTemplateString": true 9 } 10 } 11 } 12 } 13 } 14 } 15}
pug (lang="pug"
)
1{ 2 "jest": { 3 "globals": { 4 "vue-jest": { 5 "pug": { 6 "basedir": "mybasedir" 7 } 8 } 9 } 10 } 11}
jade (lang="jade"
)
haml (lang="haml"
)
stylus (lang="stylus"
, lang="styl"
)
sass (lang="sass"
), and
scss (lang="scss"
)
The Sass compiler supports Jest's moduleNameMapper which is the suggested way of dealing with Webpack aliases. Webpack's sass-loader
uses a special syntax for indicating non-relative imports, so you'll likely need to copy this syntax into your moduleNameMapper
entries if you make use of it. For aliases of bare imports (imports that require node module resolution), the aliased value must also be prepended with this ~
or vue-jest
's custom resolver won't recognize it.
1{ 2 "jest": { 3 "moduleNameMapper": { 4 "^~foo/(.*)": "<rootDir>/foo/$1", 5 // @import '~foo'; -> @import 'path/to/project/foo'; 6 "^~bar/(.*)": "~baz/lib/$1" 7 // @import '~bar/qux'; -> @import 'path/to/project/node_modules/baz/lib/qux'; 8 // Notice how the tilde (~) was needed on the bare import to baz. 9 } 10 } 11}
To import globally included files (ie. variables, mixins, etc.), include them in the Jest configuration at jest.globals['vue-jest'].resources.scss
:
1{ 2 "jest": { 3 "globals": { 4 "vue-jest": { 5 "resources": { 6 "scss": [ 7 "./node_modules/package/_mixins.scss", 8 "./src/assets/css/globals.scss" 9 ] 10 } 11 } 12 } 13 } 14}
experimentalCSSCompile
: Boolean
Default true. Turn off CSS compilation
hideStyleWarn
: Boolean
Default false. Hide warnings about CSS compilation
resources
:
1{ 2 "jest": { 3 "globals": { 4 "vue-jest": { 5 "hideStyleWarn": true, 6 "experimentalCSSCompile": true 7 } 8 } 9 } 10}
Possbility to change style loader options (sass, scss, less etc).
styleOptions
: Object
Default {}
.
1{ 2 "jest": { 3 "globals": { 4 "vue-jest": { 5 "styleOptions": { 6 "quietDeps" // e.q. sass options https://sass-lang.com/documentation/js-api#quietdeps 7 // unfortunately rest options like `data`, `file` doesnt work because @vue/compiler-component-utils internally overwrite options with their values 8 }, 9 } 10 } 11 } 12}
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 18/29 approved changesets -- score normalized to 6
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
56 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More