'How do I fix "Vue packages version mismatch" test failure [email protected] [email protected]

I realize there are a few posts related to this, but I can't find a solution for this without downgrading my Vue version to match [email protected].

Error:

 FAIL  tests/unit/example.spec.ts
  ● Test suite failed to run



    Vue packages version mismatch:

    - [email protected] (/Users/simanshrestha/Dev/RouteMaker/ionic_user_interface/node_modules/vue/index.js)
    - [email protected] (/Users/simanshrestha/Dev/RouteMaker/ionic_user_interface/node_modules/vue-template-compiler/package.json)

    This may cause things to work incorrectly. Make sure to use the same version for both.
    If you are using vue-loader@>=10.0, simply update vue-template-compiler.
    If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

      at Object.<anonymous> (node_modules/vue-template-compiler/index.js:10:9)

[email protected] seems to be the issue here. I don't think I need this dependency, but it seems to be a peer dependency for "@vue/test-utils": "^2.0.0-0"

Here's what I have in my package.json:

{
  "name": "ionic_user_interface",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "npx ionic serve",
    "build": "npx ionic build",
    "android": "npx ionic cap sync android && npx ionic cap open android",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor/android": "^3.0.0",
    "@capacitor/app": "^1.0.0",
    "@capacitor/camera": "^1.0.0",
    "@capacitor/core": "^3.0.0",
    "@capacitor/filesystem": "^1.0.0",
    "@capacitor/geolocation": "^1.0.2",
    "@capacitor/haptics": "^1.0.0",
    "@capacitor/keyboard": "^1.0.0",
    "@capacitor/share": "^1.0.0",
    "@capacitor/status-bar": "^1.0.0",
    "@ionic/vue": "^5.4.0",
    "@ionic/vue-router": "^5.4.0",
    "@mapbox/mapbox-gl-geocoder": "^4.7.2",
    "axios": "^0.21.1",
    "browser-image-compression": "^1.0.14",
    "cache-manager": "^3.4.4",
    "core-js": "^3.6.5",
    "country-code-lookup": "^0.0.19",
    "haversine": "^1.1.1",
    "jwt-decode": "^3.1.2",
    "konva": "^8.0.0",
    "lodash": "^4.17.21",
    "mapbox-gl": "^2.3.1",
    "vue": "^3.0.0-0",
    "vue-loading-overlay": "^4.0.2",
    "vue-router": "^4.0.0-0",
    "vue-simple-password-meter": "^1.0.3"
  },
  "devDependencies": {
    "@capacitor/cli": "^3.0.0",
    "@ionic/cli": "^6.16.1",
    "@types/cache-manager": "^3.4.2",
    "@types/haversine": "^1.1.5",
    "@types/jest": "^26.0.23",
    "@types/lodash": "^4.14.172",
    "@types/mapbox-gl": "^2.3.3",
    "@typescript-eslint/eslint-plugin": "^4.1.0",
    "@typescript-eslint/parser": "^4.1.0",
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-e2e-cypress": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-plugin-router": "^4.5.0",
    "@vue/cli-plugin-typescript": "^4.5.0",
    "@vue/cli-plugin-unit-jest": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "sass": "^1.35.2",
    "sass-loader": "^10.2.0",
    "typescript": "^4.2.4",
    "vue-jest": "^5.0.0-0"
  },
  "description": "An Ionic project"
}
vue.jsvuejs2


Solution 1:[1]

You are trying to test the Vue 3 application with Vue 2 compatible test utils. Therefore, You should use recommended test utils on the official website:

Vitest for components or composables that render headlessly. (e.g. the useFavicon function in VueUse. Components and DOM can be tested using @testing-library/vue.

Cypress Component Testing for components whose expected behavior depends on properly rendering styles or triggering native DOM events. Can be used with Testing Library via @testing-library/cypress.

The recommended tools are for vue 3 applications as stated:

In this guide, we'll cover basic terminology and provide our recommendations on which tools to choose for your Vue 3 application.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A Farmanbar

Related Questions