Test suite failed to run Cannot find module 'vue-template-compiler when using jest in vue3

Question

I seem to get a error in vue3 when I try to run the tests with jest.

Test suite failed to run Cannot find module 'vue-template-compiler

This is what I get when I try to run the tests. I know that package is from vue2 and I got "@vue/compiler-sfc" installed which is the vue3 version of this. If I do install that vue-template-compiler package I get the error of version mismatching.

Anyone that found a solution to this problem yet or is just waiting till they update vue-jest to work with that other package.

this is my package.json

  "name": "project",
  "version": "0.1.0",
  "private": true,
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.vue$": "vue-jest",
      "^.+\\.js$": "babel-jest"
    }
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit -w",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "test": "nightwatch",
    "testMocha": "mocha",
    "testJest": "jest"
  },
  "dependencies": {
    "@vue/cli-plugin-unit-jest": "^4.5.10",
    "@vue/compiler-sfc": "^3.0.5",
    "autoprefixer": "^9.8.6",
    "firebase": "^8.2.3",
    "jspdf": "^2.3.0",
    "nightwatch": "^1.5.1",
    "postcss": "^7.0.35",
    "register-service-worker": "^1.7.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "vue": "^3.0.5",
    "vue-class-component": "^8.0.0-0",
    "vue-jest": "^3.0.7",
    "vue-loader": "^15.9.6",
    "vue-router": "^4.0.3",
    "vue-server-renderer": "^2.6.12",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/chai": "^4.2.11",
    "@types/mocha": "^5.2.4",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-e2e-nightwatch": "^4.5.10",
    "@vue/cli-plugin-eslint": "^4.5.10",
    "@vue/cli-plugin-pwa": "^4.5.10",
    "@vue/cli-plugin-router": "^4.5.10",
    "@vue/cli-plugin-typescript": "^4.5.10",
    "@vue/cli-plugin-unit-mocha": "^4.5.10",
    "@vue/cli-plugin-vuex": "^4.5.10",
    "@vue/cli-service": "^4.5.10",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-beta.14",
    "chai": "^4.1.2",
    "chromedriver": "^87.0.5",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.4.1",
    "sass": "^1.32.4",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-tailwind": "^2.0.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {},
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "mocha": true
        }
      }
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Answer 1

To make it work in vue 3, you will need 2 things.

1. Latest version of vue-jest v5 and test-utils v2.

vue-jest v5 is the one that supports Vue 3. It is still in alpha, much like the rest of the Vue.js 3 ecosystem.

npm I vue-jest@next @vue/test-utils@next -D

2. Tell jest of how to transform vue files:

module.exports = {
  //...
  transform: {
    "^.+\\.vue$": "vue-jest",
  },
};

Answer 2

I fought with this same issue trying to get Testing Library working under a non-vue-cli webpack project. Try updating to vue-jest 5. For my project this was:

"jest": "^25.5.4",
"vue-jest": "^5.0.0-alpha.7",

This hint came from a discussion relating to this gist.