Vue add unit-jest does not configure correctly

[telion2]

Subject of the issue

I wanted to run my first test with Vue 3, Typescript and VTU.

So I ran
vue add unit-jest and
npm install --save-dev @vue/test-utils

This created an example Test file. ( I had to point to a different component, but that isn't the issue.)

The first thing I encountered was:

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

    Cannot find module 'babel-jest'
    Require stack:
    - /node_modules/vue-jest/lib/index.js
    - /node_modules/@jest/transform/build/ScriptTransformer.js
    - /node_modules/@jest/transform/build/index.js
    - /node_modules/jest-runtime/build/index.js
    - /node_modules/@jest/core/build/cli/index.js
    - /node_modules/@jest/core/build/jest.js
    - /node_modules/jest-cli/build/index.js
    - /node_modules/jest/build/jest.js
    - /node_modules/@vue/cli-plugin-unit-jest/index.js
    - /node_modules/@vue/cli-service/lib/Service.js
    - /node_modules/@vue/cli-service/bin/vue-cli-service.js

So ok I wanted to install babel-jest then:
npm install -D babel-jest
But it failed because of conflicting Library vue-jest:

 code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: vue-jest@5.0.0-alpha.10
npm ERR! Found: babel-jest@27.0.6
npm ERR! node_modules/babel-jest
npm ERR!   babel-jest@"*" from the root project
npm ERR!   peerOptional babel-jest@">=27.0.0 <28" from ts-jest@27.0.5
npm ERR!   node_modules/ts-jest
npm ERR!     dev ts-jest@"^27.0.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer babel-jest@">= 24 < 27" from vue-jest@5.0.0-alpha.10
npm ERR! node_modules/vue-jest
npm ERR!   dev vue-jest@"^5.0.0-0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: babel-jest@26.6.3
npm ERR! node_modules/babel-jest
npm ERR!   peer babel-jest@">= 24 < 27" from vue-jest@5.0.0-alpha.10
npm ERR!   node_modules/vue-jest
npm ERR!     dev vue-jest@"^5.0.0-0" from the root project

So ok maybe npm is stupid, so I installed babel-jest anyways with:
npm install babel-jest --legacy-peer-deps
Installation successful, but wenn running the tests:

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

    TypeError: babelJest.getCacheKey is not a function

      at Object.getCacheKey (node_modules/vue-jest/lib/index.js:15:19)
      at ScriptTransformer._getCacheKey (node_modules/@jest/transform/build/ScriptTransformer.js:266:23)
      at ScriptTransformer._getFileCachePath (node_modules/@jest/transform/build/ScriptTransformer.js:293:27)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:421:32)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:523:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)

This is an Error I couldn't find a solution for.
Now Granted I am new to a few things like Vue 3 and Typescript. I made everything else work though, except making jest understand vue files and VTU tests.

Here is my package.json:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/translations/**/*.json\"",
    "test:unit:coverage": "vue-cli-service test:unit --verbose --coverage "
  },
  "dependencies": {
    "@vuex-orm/core": "^0.36.4",
    "@vuex-orm/plugin-axios": "^0.9.4",
    "@vuex-orm/plugin-search": "^0.24.1",
    "axios": "^0.21.1",
    "babel-jest": "^27.0.6",
    "core-js": "^3.6.5",
    "keycloak-js": "^14.0.0",
    "lodash": "^4.17.21",
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primevue": "^3.6.0",
    "vue": "^3.2.4",
    "vue-class-component": "^8.0.0-0",
    "vue-i18n": "^9.1.7",
    "vue-loader": "^16.5.0",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/preset-typescript": "^7.15.0",
    "@intlify/vue-i18n-loader": "^3.0.0",
    "@types/vue": "^2.0.0",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "^4.5.13",
    "@vue/compiler-sfc": "^3.2.4",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-rc.12",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "sass": "^1.38.0",
    "sass-loader": "^7.1.0",
    "ts-jest": "^27.0.5",
    "typescript": "^3.9.10",
    "vue-cli-plugin-i18n": "~2.1.3",
    "vue-jest": "^5.0.0-0",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript",
      "@vue/typescript/recommended",
      "@vue/prettier",
      "@vue/prettier/@typescript-eslint"
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser",
      "ecmaVersion": 2020
    },
    "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"
  ]
}

The npm script I use for the unit tests is:
"test:unit:coverage": "vue-cli-service test:unit --verbose --coverage "

the jest.config.js I tried:

module.exports = {
  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
  transform: {
    "^.+\\.vue$": "vue-jest",
  },
};

The jest Config I want to use but didn't work either:

{
    maxWorkers: "90%",
    preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
    verbose: true,
    moduleFileExtensions: ["js", "ts", "json", "vue"],
    transform: {
      // process `*.vue` files with `vue-jest`
      ".*\\.(vue)$": "vue-jest",
    },
    testURL: "http://localhost/",
    collectCoverageFrom: [
      "**/*.{js,jsx, ts, vue}",
      "!**/node_modules/**",
      "!**/vendor/**",
    ],
    moduleNameMapper: {
      "^@/(.*)$": "<rootDir>/src/$1",
    },
  };

This Config would fail because of:

 FAIL  tests/unit/plugins/keycloak.test.ts
  ● Test suite failed to run

    SyntaxError: /home/eric/ilabs/schule-digital-ui/src/App.vue: Support for the experimental syntax 'jsx' isn't currently enabled (1:1):

    > 1 | <template>
        | ^
      2 |   <router-view></router-view>
      3 | </template>
      4 |

My tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Expected behaviour

When I run vue add jest-unit, then I want VTU to work with jest, typescript and Vue 3.
When importing a .vue file, no Error is thrown.

Actual behaviour

Various Errors are thrown from mainly Babel, which can't figure our how to deal with Vue 3 typescript files.

Possible Solution

No Idea.

[cexbrayat]

Hi @telion2

Thank you for opening an issue.

This is more an issue with the CLI than with vue-test-utils, but as I have an idea about the reason, let's answer it here.

You are trying to use Jest 27 which is currently not supported by the CLI.
We're working on landing the support for Jest 27 (see this PR vuejs/vue-cli#6627 if you are interested), but this still needs more work.

My advice would be to stick to jest 26 (and ts-jest, and babel-jest 26)

Ho and I realize you're using Vue 2! If you're still on v2, you should be using @vue/test-utils v1, and vue-jest v4.See the documentation here https://vue-test-utils.vuejs.org/

Setting these versions right should solve your issues!