{"id":15036,"library":"vue-jest","title":"Jest Vue Transformer (Legacy)","description":"vue-jest is a Jest transformer designed to enable testing of Vue Single File Components (SFCs) within a Jest environment. Version 3.0.7 is part of the legacy branch primarily supporting Vue 2.x applications and compatible with Jest versions up to Jest 27. This package transpiles Vue SFCs, including script, template, and style blocks, into a format Jest can understand. While still functional for older projects, it has been largely superseded by the `@vue/vue2-jest` and `@vue/vue3-jest` packages, which offer dedicated support for Vue 2 and Vue 3 respectively, alongside Jest 28 and 29. Developers working on new projects or upgrading Jest should use the scoped `@vue` packages. The release cadence for `vue-jest@3.x` is now minimal, focused mainly on critical fixes for existing users, as active development has shifted to the scoped packages. Its key differentiator was being the official Vue team's solution for Jest testing before the package split.","status":"maintenance","version":"3.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/vue-jest","tags":["javascript","jest","vue","jest vue","jest vue transform","jest vue preprocessor","vue jest","vue jest transform"],"install":[{"cmd":"npm install vue-jest","lang":"bash","label":"npm"},{"cmd":"yarn add vue-jest","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-jest","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for transpiling JavaScript/TypeScript within Vue SFCs. Supports Babel 6 and 7.","package":"babel-core","optional":false},{"reason":"Required peer dependency for Vue 2.x component logic.","package":"vue","optional":false},{"reason":"Required peer dependency for Vue 2.x template compilation.","package":"vue-template-compiler","optional":false},{"reason":"Implicit peer dependency as it's a Jest transformer. `vue-jest@3` typically works with Jest 26-27.","package":"jest","optional":false}],"imports":[{"note":"vue-jest is a Jest transformer, not a library meant for direct JavaScript imports. Its usage is solely within Jest configuration files (`jest.config.js` or similar).","wrong":"import vueJest from 'vue-jest';","symbol":"Transformer Configuration","correct":"module.exports = { transform: { '^.+\\.vue$': 'vue-jest' } };"}],"quickstart":{"code":"/* jest.config.js */\nmodule.exports = {\n  moduleFileExtensions: ['js', 'json', 'vue'],\n  transform: {\n    '^.+\\.vue$': 'vue-jest',\n    '^.+\\.js$': 'babel-jest',\n    // If using TypeScript, you might need 'ts-jest'\n    // '^.+\\.ts$': 'ts-jest',\n  },\n  moduleNameMapper: {\n    '^@/(.*)$': '<rootDir>/src/$1',\n  },\n  testEnvironment: 'jsdom',\n  snapshotSerializers: ['jest-serializer-vue'],\n};\n\n/* src/components/HelloWorld.vue */\n<template>\n  <div class=\"hello\">\n    <h1>{{ msg }}</h1>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'HelloWorld',\n  props: {\n    msg: String\n  }\n};\n</script>\n\n<style scoped>\nh3 {\n  margin: 40px 0 0;\n}\n</style>\n\n/* tests/unit/HelloWorld.spec.js */\nimport { shallowMount } from '@vue/test-utils';\nimport HelloWorld from '@/components/HelloWorld.vue';\n\ndescribe('HelloWorld.vue', () => {\n  it('renders props.msg when passed', () => {\n    const msg = 'new message';\n    const wrapper = shallowMount(HelloWorld, {\n      propsData: { msg }\n    });\n    expect(wrapper.text()).toMatch(msg);\n  });\n});","lang":"javascript","description":"This quickstart demonstrates how to configure `vue-jest` in `jest.config.js` for testing a basic Vue 2 component, including an example component and its corresponding unit test using `@vue/test-utils`."},"warnings":[{"fix":"Install `@vue/vue2-jest` or `@vue/vue3-jest` and update `jest.config.js` transform entry to `'@vue/vue2-jest'` or `'@vue/vue3-jest'`. Ensure compatibility with your Jest and Vue versions.","message":"The `vue-jest` package (v3.x and earlier) has been superseded. For Jest 28 and 29, and for distinct Vue 2 or Vue 3 projects, developers must migrate to `@vue/vue2-jest` or `@vue/vue3-jest` respectively. These new packages have different installation and configuration paths.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Ensure `vue-template-compiler` is installed with the exact same version as `vue`. For example, `npm install vue-template-compiler@<vue-version>`.","message":"`vue-jest@3.x` requires `vue-template-compiler` to be explicitly installed as a peer dependency, matching your `vue` version. Mismatched versions can lead to compilation errors or unexpected behavior.","severity":"gotcha","affected_versions":"<=3.x"},{"fix":"Verify your `jest.config.js` includes `ts-jest` or `babel-jest` for `.ts` files and that your `tsconfig.json` is correctly configured to transpile for your target environment. Ensure `tsconfig.json` includes `vue` types if necessary.","message":"When using TypeScript in Vue SFCs, `vue-jest@3.x` typically relies on `babel-jest` or `ts-jest` for script block transformation. Incorrect configuration of these can lead to \"unexpected token\" errors or TypeScript compilation failures.","severity":"gotcha","affected_versions":"<=3.x"},{"fix":"Plan to migrate to the appropriate scoped `@vue` package to receive active development, bug fixes, and Jest 28/29+ compatibility.","message":"The `vue-jest` package itself (versions 3.x and earlier) is considered deprecated by the Vue team in favor of the scoped `@vue/vue2-jest` and `@vue/vue3-jest` packages. While still functional, it receives minimal maintenance.","severity":"deprecated","affected_versions":"<=3.x"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"`npm install vue-template-compiler@<vue-version>` or `yarn add vue-template-compiler@<vue-version>`. Ensure the version matches your installed `vue` package.","cause":"`vue-template-compiler` is a required peer dependency but is not installed or its version is mismatched with `vue`.","error":"Cannot find module 'vue-template-compiler' from 'node_modules/vue-jest/lib/transformers/template.js'"},{"fix":"Check your `jest.config.js` `transform` entry for `vue-jest`: `{'^.+\\.vue$': 'vue-jest'}`. Also, ensure `babel-jest` is configured for JavaScript files and `transformIgnorePatterns` allows transformation of relevant modules if needed.","cause":"`vue-jest` is not correctly configured in `jest.config.js`'s `transform` section for `.vue` files, or `babel-jest` isn't configured for `.js` files in `node_modules`.","error":"Jest encountered an unexpected token. This usually means that you are trying to import a file which Jest cannot process, e.g. a .vue file, without a proper transformer."},{"fix":"Ensure `babel-jest` (or `ts-jest` for TypeScript) is correctly configured in `jest.config.js` to transpile ES modules. For Babel, verify your `.babelrc` or `babel.config.js` includes `@babel/preset-env` with `modules: 'commonjs'` (or `auto` if Babel 7.x).","cause":"CommonJS vs. ES Module conflict. Vue SFCs often use ESM syntax, but Jest (depending on configuration and Node.js version) might be running in CommonJS mode. `babel-jest` or `ts-jest` need to correctly transpile ESM `import`/`export` statements.","error":"SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm"}