Vue add unit-jest does not configure correctly

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.

vuejs / test-utils