vuejs / vue-jest

Jest Vue transformer
MIT License
746 stars 157 forks source link

Unsilenceable TS Jest version mismatch errors #444

Closed MattiasMartens closed 2 years ago

MattiasMartens commented 2 years ago

Wanted to make you aware of this issue with Jest–TypeScript compatibility: https://github.com/kulshekhar/ts-jest/issues/958

ts-jest produces a warning if the version of Typescript is an advanced one they have not tested. The latest build of ts-jest supports Typescript 4, but that does not seem to be the case for vue3-jest when used with ts-jest. It produces a warning.

ts-jest supports suppressing this warning with TS_JEST_DISABLE_VER_CHECKER=true. However this flag does not work when I run jest via vue-jest. I would suspect that both of these are from the same reason of vue-jest depending on an earlier version of jest, except that I can’t reproduce the problem separately from a Vue project using the versions of jest (26.0.0) and ts-jest (26.4.4) that my version of vue-jest (26.0.1) depends on.

I would downgrade Typescript to avoid the warning, but that collides with this much worse problem: https://stackoverflow.com/a/69047437/5063469

I could also upgrade vue-jest forward to 27—maybe that would fix it—but then I run afoul of this also much worse problem: https://github.com/vuejs/vue-jest/issues/415

I’m not in urgent need of a fix here. The error reports are annoying noise, but things work fine otherwise, and it’s certainly better than the alternatives. (If someone could tell me how to filter lines beginning with "ts-jest[versions]" out of console output, I’d be a happy camper!) Consider this a report from the trenches of Vue 3–Typescript–Jest integration.

Here’s my current dependency list for my project: "dependencies": { "babel-core": "^6.26.3", "core-js": "^3.20.3", "fp-ts": "^2.11.7", "vue": "^3.0.0" }, "devDependencies": { "babel-jest": "26", "@babel/core": "7", "@babel/preset-env": "^7.16.11", "@vue/cli-plugin-unit-jest": "^4.5.15", "@vue/test-utils": "^2.0.0-rc.18", "@vue/vue3-jest": "26.0.1", "jest": "26", "ts-jest": "26", "tsconfig-paths": "^3.12.0", "@testing-library/vue": "^6.4.2", "@types/jest": "^24.0.19", "@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-service": "~4.5.0", "@vue/compiler-sfc": "^3.2.29", "@vue/eslint-config-typescript": "^7.0.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", "typescript": "4" }

MattiasMartens commented 2 years ago

This can be closed. After a lot of wrestling with upgrades I figured out how to get everything agree on a Vue 3–Typescript 4–Jest axis. Because of this I learned about npx check-peer-dependencies which was very helpful in sorting it out.

For the record, here’s the new dependency list:

"dependencies": {
    "@types/express": "^4.17.13",
    "big-m": "^5.2.3",
    "cuid": "^2.1.8",
    "fp-ts": "^2.11.7",
    "runtypes": "^6.5.0",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/eslint-parser": "^7.16.5",
    "@babel/preset-env": "^7.16.11",
    "@testing-library/vue": "^6.4.2",
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
    "@vue/cli-plugin-babel": "^5.0.0-rc.2",
    "@vue/cli-plugin-eslint": "^5.0.0-rc.2",
    "@vue/cli-plugin-typescript": "^5.0.0-rc.2",
    "@vue/cli-plugin-unit-jest": "^5.0.0-rc.2",
    "@vue/cli-service": "^5.0.0-rc.2",
    "@vue/compiler-sfc": "^3.2.29",
    "@vue/eslint-config-typescript": "^10.0.0",
    "@vue/test-utils": "^2.0.0-rc.18",
    "@vue/vue3-jest": "^27.0.0-alpha.4",
    "babel-jest": "27",
    "check-peer-dependencies": "^4.1.0",
    "css-loader": "^6.5.1",
    "eslint": "8",
    "eslint-plugin-vue": "8",
    "html-webpack-plugin": "5.5.0",
    "jest": "27",
    "ts-jest": "27",
    "tsconfig-paths": "^3.12.0",
    "typescript": "4",
    "vue-eslint-parser": "^8.2.0",
    "webpack": "5"
  }