jest integration with Vue js - Error getting in test command

[pankajd1990]

I am new in Vue js
I have integrated jest with Vue js
when i running npm run test command. i am getting following error

Note: I setup application using following link
https://v1.test-utils.vuejs.org/guides/

I am sharing my package. Json and jest config file

{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"test": "vue-cli-service test:unit"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-unit-jest": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/test-utils": "^1.3.6",
"@vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"install": "^0.13.0",
"jest": "^27.0.5",
"npm": "^10.8.3",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.7.16"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {},
"overrides": [
{
"files": [
"/tests/*.{j,t}s?(x)",
"/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

---

Jest config file

module.exports = {
moduleFileExtensions: ["js", "json", "vue"],
preset: "@vue/cli-plugin-unit-jest",
transform: {
".\.(vue)$": "vue-jest",
},
moduleNameMapper: {
"^@/(.)$": "/src/$1",
},
collectCoverage: true,
collectCoverageFrom: ["/*.{js,vue}", "!/node_modules/**"],
};

[ibrahimBougaoua]

Hi
The vue-template-compiler is for Vue 2, but you are using Vue 3. You should replace it with @vue/compiler-sfc.

[ibrahimBougaoua]

Steps to Fix:

1. Remove vue-template-compiler if it's still in your project.
2. Add @vue/compiler-sfc for Vue 3.
3. Make sure @vue/vue3-jest is installed.
4. Run:
   npm uninstall vue-template-compiler vue-jest
   npm install @vue/compiler-sfc @vue/vue3-jest

[pankajd1990]

I installed above packages in my application
after running npm run test command . it showing following error

now its asking to install vue-template-compiler package

my jest configuration file

module.exports = {
moduleFileExtensions: ["js", "json", "vue"],
preset: "@vue/cli-plugin-unit-jest",
transform: {
"^.+\.js$": "babel-jest",
".\.(vue)$": "@vue/vue3-jest",
},
moduleNameMapper: {},
collectCoverage: true,
collectCoverageFrom: ["**/.{js,vue}", "!/node_modules/"],
};

package.json

{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"test": "vue-cli-service test:unit"
},
"dependencies": {
"@vue/compiler-sfc": "^3.5.7",
"core-js": "^3.8.3",
"i": "^0.3.7",
"vue": "^3.5.6",
"vue-loader": "^17.4.2",
"vue3-jest": "^27.0.0-alpha.1"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-unit-jest": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/test-utils": "^1.3.6",
"@vue/vue3-jest": "^27.0.0",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"install": "^0.13.0",
"jest": "^27.0.5",
"npm": "^10.8.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {},
"overrides": [
{
"files": [
"/tests/*.{j,t}s?(x)",
"/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

my helloworld component spec file

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
props: { msg }
})
expect(wrapper.text()).toMatch(msg)
})
})

[pankajd1990]

thanks